Design
UI/UX direction, visual design, and design systems
web-app-designer
by CAPHTECH
"Webアプリの個別画面・コンポーネントのデザインを体系的に行うスキル。デザインプロセス・レイアウト・コンポーネント設計・インタラクション・アクセシビリティなどWebデザインの確立された手法を適用する。デザインシステム全体の構築・運用はdesign-system-builderスキルを使用すること。Use when: 「Webアプリをデザインして」「UIを設計して」「画面をデザインして」「レスポンシブ対応して」「アクセシビリティを改善して」「コンポーネントを設計して」「カラーパレットを決めて」と言われた時。"
ui-skills
by simonlee2
This skill should be used when the user asks to "build UI", "create interface", "design components", "implement frontend", or needs guidance on building accessible, performant interfaces with proper animation, typography, and component patterns. Provides opinionated constraints for building better interfaces with agents.
aico-frontend-style-extraction
by yellinzero
Extract design tokens (colors, typography, spacing, effects) from reference website or screenshot to create project design system. UNIQUE VALUE: Creates standardized design-system.md file with all design tokens extracted systematically. Use this skill when: - User shares reference website URL and wants to extract its style - User provides screenshot or image and asks to "extract design", "extract style" - Running /frontend.init and need to create design system from reference - User asks to "create design system", "extract colors", "extract typography" - Need to establish consistent design tokens before starting frontend work Methods: URL (via Playwright MCP screenshot) or direct screenshot analysis Output: ALWAYS write to docs/reference/frontend/design-system.md
business-naming
by theepan
Generate and evaluate names for companies, products, brands, and features using a structured three-phase process (Identify, Invent, Implement) based on David Placek's Lexicon Branding methodology. Use when a user asks to name a company, name a product, brainstorm brand names, evaluate a shortlist of names, rename something, build a creative brief for naming, or find a name for a startup, app, or service. Accepts a description of the business, product, or brand to be named.
impeccable-harden
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /harden. Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use for frontend and UI design tasks."
tailwind-design-system
by baotoq
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
design-lead
by elliottrjacobs
Bridge strategy and design — set design direction, review design quality, and establish design tenets. Use when the user says "design review", "design direction", "design strategy", "creative direction", "design quality", "design tenets", or needs to translate strategy into design decisions.
impeccable-bolder
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /bolder. Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use for frontend and UI design tasks."
design-system-builder
by CAPHTECH
"デザインシステムの構築・運用を体系的に行うスキル。ドキュメント（要件定義・ブランドガイドライン）からDesign Tokens・コンポーネント体系・ガバナンスまでを一貫して設計する。思考フレームワーク（Double Diamond・Atomic Design・Design Tokens 3層）の適用、暗黙的デザイン判断の形式知化（DDR/QOC/RFC）、UIインベントリ収集（手動+MCP自動化）を統合する。Use when: 「デザインシステムを構築して」「デザインシステムを設計して」「デザイントークンを定義して」「デザイン原則を策定して」「UIインベントリを作って」「デザインガバナンスを設計して」「デザイン判断を記録して」と言われた時。"
impeccable-critique
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /critique. Evaluate design effectiveness from a UX perspective. Assesses visual hierarchy, information architecture, emotional resonance, and overall design quality with actionable feedback. Use for frontend and UI design tasks."
design-ui-ux-pro-max
by baotoq
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples."
frontend-design
by SebastiaanWouters
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics.
impeccable-simplify
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /simplify. Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use for frontend and UI design tasks."
impeccable-teach-impeccable
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /teach-impeccable. One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines. Use for frontend and UI design tasks."
figma-reader
by delexw
Read Figma designs via Figma MCP server. Auto-detects MCP availability and prompts user only if setup is needed. Use when Figma links or UI design images are found in task context.
impeccable-adapt
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /adapt. Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments. Use for frontend and UI design tasks."
crunch-design
by crunchdao
Use when building UI with @crunch-ui components, icons, or design tokens. Use when styling CrunchDAO apps, choosing colors, typography, or layout patterns. Use when importing from @crunch-ui/core, @crunch-ui/icons, @crunch-ui/utils, or @crunch-ui/tailwind-config.
impeccable-colorize
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /colorize. Add strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive. Use for frontend and UI design tasks."
impeccable-extract
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /extract. Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use for frontend and UI design tasks."
beautiful-ui
by apetcu
Build stunning glassmorphism dark-mode interfaces with Next.js and Tailwind CSS v4. Use when creating any frontend UI, component, page, or application. Specializes in glass-like translucent surfaces, luminous color palettes on dark backgrounds, fluid animations with Framer Motion, and premium visual polish. Always generates dark-mode-first, glassmorphic, production-grade code with exceptional aesthetic quality.
svgl
by saphid
Trigger this for requests to show, preview, display, find, download, or convert logos, logomarks, brand marks, wordmarks, badges, app icons, product icons, company SVGs, and PNG/JPG/GIF versions of those assets from svgl.app.
aico-frontend-design
by yellinzero
Transform PRD or story into complete page/component designs with ASCII layouts, component specs, interaction flows, and frontend implementation prompts. Use this skill when: - User asks to "design the page", "design component", "create page design" - User mentions "page design", "component design", "UI design", "layout design" - Running /frontend.design command - PRD or story is ready and need visual/interaction design before implementation - Need to create design spec that frontend developer can implement from Prerequisites: Design system must exist at docs/reference/frontend/design-system.md Output: ALWAYS write design files to docs/reference/frontend/designs/{name}.md
frontend-radix-ui-design-system
by baotoq
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
aico-frontend-init
by yellinzero
Initialize frontend environment by creating design system and constraints documents from templates. Use this skill when: - Running /frontend.init command - User asks to "initialize frontend", "setup frontend environment" - Starting frontend work and need to establish design system and constraints - Need to create docs/reference/frontend/design-system.md or constraints.md