bencium/bencium-claude-code-design-skill
14 skills7.8k installs5.3k starsGitHub
Install
npx skills add https://github.com/bencium/bencium-claude-code-design-skillSkills in this repo
1Bencium Innovative Ux Designerbencium-innovative-ux-designer is a bencium-claude-code-design-skill package at metadata version 2.0.0 that helps agents craft memorable, accessible web interfaces. It emphasizes collaborative design decisions, bold typography and color, and polished component code that deliberately avoids generic AI slop patterns. Use it when building web components, pages, or applications that need creative direction plus working HTML/CSS/JS or framework code. The skill targets frontend implementation with exceptional aesthetic detail rather than wireframes alone. Developers reach for bencium-innovative-ux-designer when a product UI must feel intentional and brand-distinctive while still shipping production-ready markup and styles.1.2kinstalls2Bencium Controlled Ux Designerbencium-controlled-ux-designer is an agent skill that guides Claude Code to produce UI and frontend components that strictly follow your chosen design system and brand rules. Instead of letting the model improvise aesthetics or spacing, it applies structured constraints, critique steps, and token references so every button, layout, and interaction stays on-brand and consistent. Solo builders use it when they want pixel-perfect, reusable frontend output without constant manual correction or design-system drift. It turns vague "make this look nice" prompts into reliable, system-aware code generation that accelerates UI work while protecting visual identity.768installs3Bencium Impact Designerbencium-impact-designer is a Bencium Claude Code design skill listed on skills.sh with 494 installs and rank 5 in its source repository bencium/bencium-claude-code-design-skill. The skill steers agents toward impact-oriented interface decisions—hero clarity, value proposition hierarchy, and flow structure aimed at conversion rather than decorative mockups. Developers reach for bencium-impact-designer when prototyping SaaS landing pages, onboarding screens, or marketing UI inside Claude Code and need opinionated UX guidance that prioritizes measurable user action over generic component libraries.640installs4Ui Typographyui-typography is a skill from bencium/bencium-claude-code-design-skill with 440 installs on skills.sh and rank 9 in its source catalog. It gives Claude Code explicit typography guidance so generated and refactored UI components use consistent type scales, line heights, font weights, and heading hierarchy instead of ad hoc font choices. Developers reach for ui-typography when building design systems, polishing landing pages, or fixing inconsistent text styling across React, HTML, or CSS component libraries. The skill encodes production-grade typography conventions agents can follow during component generation.609installs5Design Auditdesign-audit is a bencium-claude-code-design-skill premium UI/UX audit skill that evaluates existing apps across 15 dimensions—including visual hierarchy, spacing, typography, color, alignment, components, iconography, motion, empty/loading/error states, dark mode, density, responsiveness, and accessibility—then outputs a three-phase implementation plan. Phase 1 covers critical hierarchy and usability fixes; Phase 2 handles spacing, typography, and color refinement; Phase 3 adds micro-interactions and polish. The skill reads eight prerequisite docs (DESIGN_SYSTEM, FRONTEND_GUIDELINES, APP_FLOW, PRD, TECH_STACK, progress, LESSONS) and walks every screen at mobile, tablet, and desktop before recommending token-based changes. design-audit is purely visual—it never modifies application logic. Reach for design-audit when interfaces need a professional design pass before release. Skip design-audit for backend-only work or net-new feature scoping.592installs6Human Architect Mindsethuman-architect-mindset from bencium/bencium-claude-code-design-skill teaches systematic architectural thinking built on a loyalty foundation and five pillars: domain modeling, systems thinking, constraint navigation, AI-aware decomposition, and AI-first development evaluation. It activates proactively on keywords like architecture, integration, scale, breaking change, migration, legacy, compliance, and security, guiding architects to ask whether a change optimizes within commitments or betrays them. The skill emphasizes that correct technical solutions can be unshippable without navigating politics, budget, legacy, and compliance constraints. It announces at start and structures decisions around user mental models before locking stack or UI patterns. Reach for human-architect-mindset when planning multi-component systems, evaluating technology choices, decomposing problems for AI agents, or discussing breaking changes that affect teams and compliance.495installs7Agentic Ux Design Relationship Centric Interfacesagentic ux design - relationship-centric interfaces is a Claude Code skill from bencium/bencium-claude-code-design-skill that shifts UX from screen-centric flows to relationship-centric agentic interfaces. The skill documents five pillars—memory architecture, trust evolution, relationship-centric architecture, autonomous planning, and relationship metrics—plus design patterns for behavioral event streaming, contextual memory graphs, and human-AI co-creation. Developers reach for this skill when building dashboards, productivity tools, or AI assistants where returning users should not start over each session. A technical reference covers privacy-preserving memory tiers, trust recovery protocols, and implementation checklists for measuring compounding value across visits.485installs8Bencium Code Conventionsbencium-code-conventions is an agent skill from bencium/bencium-claude-code-design-skill that codifies a full-stack style guide for AI-assisted coding sessions. The skill specifies ReactJS and Next.js App Router structure, TypeScript conventions, TailwindCSS v3.x with Shadcn UI, Vite when applicable, and Postgres-compatible Convex or Supabase backends deployed to Netlify, Vercel, or Fly. Developers reach for bencium-code-conventions when agents repeatedly drift from repo norms on naming, folder layout, or stack choices. The skill also notes Mac M2 environment constraints, Python virtual environments, and a preference for Rust over Python when alternatives exist.484installs9Adaptive Communicationadaptive-communication is a Claude Code skill from bencium/bencium-claude-code-design-skill that teaches agents to match user communication style before answering design or UX questions. It detects high-context relational signals—hedging language, open-ended framing, personal context—and explicit transactional requests, then chooses exploration versus direct answers accordingly. The documented success metric pairs task completion with whether the user felt understood, making the skill useful when intent is ambiguous. Developers and designers reach for adaptive-communication when the same Nav spec must become an exec brief, an engineer handoff, or a research summary without scope drift. The skill applies broadly across conversations, not only during asset production, so agents avoid over-confident replies when users are still exploring options.481installs10Bencium AeoBencium-aeo applies Answer Engine Optimization to make sites legible to LLM-powered search and assistants. It guides rewrites, entity mapping, and citation prompts so indie and SaaS pages are more likely to be quoted by ChatGPT, Perplexity, and similar systems.479installs11Renaissance Architecturerenaissance-architecture is a bencium-marketplace skill for software architecture and UI/UX decisions that prioritize creation over commentary. The SKILL.md advocates first-principles thinking about what to build, with default simplicity tables—for example SQLite before Postgres and monolith before services—and a framework comparison covering Next.js, Remix, Astro, SvelteKit, Rails, Django, FastAPI, and Hono/Elysia. It also prescribes human-legible configs, teaching error messages, and structured logging practices for systems a new teammate can understand quickly. Developers reach for renaissance-architecture when brainstorming apps, reviewing designs, choosing stacks, or pushing back on unnecessary complexity during strategy discussions.478installs12Negentropy Lensnegentropy-lens is a Claude Code skill from bencium/bencium-claude-code-design-skill that coaches agents to strip visual entropy from interfaces while preserving core features. During frontend builds, the skill evaluates spacing, hierarchy, color, and component density to simplify layouts and improve scanability. Developers reach for negentropy-lens when screens feel cluttered, inconsistent, or visually overwhelming after initial implementation. It complements component libraries and design systems by enforcing clarity constraints at the code and markup level rather than replacing a Figma source of truth.470installs13Vanity Engineering Reviewvanity-engineering-review is a Bencium marketplace skill that diagnoses resume-driven and aesthetically motivated engineering. It runs four phases: anchor on real user requirements and actual scale, scan against detection patterns with V0–V3 vanity severity, produce a Vanity Engineering Assessment with a 1–10 Requirement-to-Complexity Ratio and up to 7 top findings, then generate tiered kill criteria to prevent recurrence. Seven diagnostic lenses—including the Deletion Test, Scale Test, and Abstraction Test—surface unnecessary microservices, premature optimization, and single-implementation interfaces. Triggers include code review, architecture review, is this over-engineered, and simplify this. Use it when teams need blunt, evidence-backed simplification guidance before merging or rebuilding.411installs14Insurgent CampaignInsurgent Campaign designs grassroots-first marketing and launch campaigns for people and organizations that cannot win by outspending competitors. A founder or marketer uses it to ideate campaign concepts, audit spend asymmetry, assemble an organic channel stack, and gate any paid spend behind proof. It runs a staged workflow with a market-message-fit gate and ends in a lift-test plan measuring incremental impact.176installs