Loading...
Loading...
Found 116 Skills
Clone a GitHub repo and extract design tokens (colors, fonts, spacing) from its codebase. Use when user gives a github.com URL and wants a design system or design work rooted in the repo's style.
Design engineering skill for Claude Code that enforces consistent UI patterns through memory, craft principles, and systematic design tokens.
Critique a screen's brand consistency against mood.md, voice.md, and tokens.md.
Connect AI coding agents to Figma designs via MCP to generate code from frames, extract design tokens, use Code Connect, and write directly to the canvas
Use when customizing gluestack-ui themes and design tokens. Covers theme provider setup, design tokens, dark mode, NativeWind integration, and extending themes.
Frontend: Tailwind, CSS-in-JS, design tokens, UI libraries, PWA, accessibility.
Design System Governance Workflow for auditing, refactoring, and syncing enterprise design systems, design tokens, Figma variables, and developer handoff outputs.
Apply when deciding, designing, or implementing FastStore theme customizations in src/themes/ or working with design tokens and SCSS variables. Covers global tokens, local component tokens, Sass variables, CSS custom properties, and Brandless architecture. Use for any visual customization of FastStore storefronts that does not require component overrides.
Build UIs using IBM's Carbon Design System. Use when the user requests Carbon-styled interfaces, IBM-style dashboards, enterprise UIs following Carbon conventions, or explicitly mentions Carbon, IBM design, or @carbon/react. Covers component usage, design tokens (color, typography, spacing, motion), theming (White, Gray 10, Gray 90, Gray 100), grid layout, and accessibility. Supports both artifact/HTML output (CDN-based) and full React project output (@carbon/react). Triggers include "Carbon", "IBM design system", "enterprise dashboard", "@carbon/react", "carbon components", or requests for IBM-style professional interfaces.
Use when writing Flutter code that uses flutter_duskmoon_ui packages, when creating or modifying widgets that consume DmTheme or DmDesignTokens, when setting up theming in a DuskMoon app, when building adaptive widgets, or when reviewing code for DuskMoon design compliance. Also trigger when the user mentions duskmoon_theme, duskmoon_widgets, DuskmoonApp, DmTheme, DmAdaptiveWidget, DmDesignTokens, DmPlatformStyle, or any Dm* widget prefix. This skill defines the rules and patterns that ALL code touching the DuskMoon Flutter ecosystem must follow.
Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.
A friendly, hand-drawn sketch interface inspired by pencil illustrations on warm cream paper. Soft teal brand accents, hand-written display headings, rounded pill controls.