312 skills · sorted by relevance
Convert long Markdown specifications, reports, and plans into a single HTML document with a sticky table of contents, search, section tracking, and code-copy buttons. Apply previously configured brand colors and layout styles.
Review a design system for inconsistent names and hardcoded visual values, document component variants and accessibility behavior, or propose new interface patterns that follow existing rules. Produce structured audits, component references, and design proposals.
Turn long Markdown files into a single HTML file for reading, reviewing code, or presenting slides. Routes each input to a specialized converter and applies shared design settings, with navigation and interaction suited to the document type.
Review a design system for inconsistent names and hardcoded visual values, document component variants and accessibility behavior, or propose new interface patterns that follow existing rules. Produce structured audits, component references, and design proposals.
Guides the practical path from 'we have no design system' or 'we have a mess' to a real, functional design system. Component inventory, design token extraction, headless UI adoption (Radix, React Aria, Headless UI), migration order of operations, and the assessment-to-rollout pipeline. Activate on 'design system from scratch', 'bootstrap design system', 'no design system', 'design system migration', 'headless UI adoption', 'component audit', 'design token extraction', 'design system strategy'. NOT for building specific components once a system exists (use design-system-creator), not for generating token files/configs (use design-system-generator).
The English summary is being prepared. Showing the original description.
Guides the practical path from 'we have no design system' or 'we have a mess' to a real, functional design system. Component inventory, design token extraction, headless UI adoption (Radix, React Aria, Headless UI), migration order of operations, and the assessment-to-rollout pipeline. Activate on 'design system from scratch', 'bootstrap design system', 'no design system', 'design system migration', 'headless UI adoption', 'component audit', 'design token extraction', 'design system strategy'. NOT for building specific components once a system exists (use design-system-creator), not for generating token files/configs (use design-system-generator).
The English summary is being prepared. Showing the original description.
Link Figma design components with their code counterparts through Code Connect, helping design-system updates flow into the codebase. This catalogue entry points agents toward the full upstream workflow.
Create adoption strategy and enablement materials to drive design system usage. Use when the system exists but teams ignore it. For contribution and versioning rules, use `design-system-governance` (design-systems).
The English summary is being prepared. Showing the original description.
Roast the current repo's design system with real data. Runs a deterministic scanner (no tokens, ~1s) that counts everything that betrays a design system, from colours and their near-identical twins to greys, spacing values, typefaces, duplicated and never-imported components, inline styles, !important and arbitrary Tailwind values, and compares them against Ideal Design System norms, a benchmark of 119 public repos (a 34-repo core fleet plus groups for shadcn, Tailwind, MUI, Mantine, Chakra, Ant Design and web components) and 10 reputable design systems, generates a shareable HTML diagnosis, and can generate design-system-rules.md, the agent rules file that stops the mess regrowing.
The English summary is being prepared. Showing the original description.
Reviews existing UI components for design-system consistency, states, responsiveness and accessibility using consumer-owned context. Use when asked to review component quality, check design-system adherence or audit component consistency.
The English summary is being prepared. Showing the original description.
Create, list, and apply Stitch design systems from DESIGN.md using the verified Stitch MCP design-system tools and safe upload fallbacks.
The English summary is being prepared. Showing the original description.
Run scripts through the Figma Plugin API, an interface for operating on designs. Use it to write to the canvas, inspect content, work with variables, and carry out design-system tasks.
Create a blank Figma Design or FigJam file as the starting point for agent workflows. Use it to prepare a new workspace before building a design system or organizing workshop activities.
Review web page headings for skipped levels, unclear labels, and incorrect structure. Organize HTML headings around the content so people using screen readers can understand page sections and navigate between them.
Review whether ARIA roles, which describe interface elements to assistive technology, have the required parent roles. Find misplaced menu items, tabs, or list items, suggest suitable containers, and explain how to verify the corrected structure.
Turn a Markdown slide deck into a single HTML file for browser presentations. Navigate with the keyboard, view speaker notes and the next slide in presenter mode, and print the deck as a PDF with one slide per page.
Set shared brand colors, fonts, layout style, and table of contents behavior for markdown-html outputs. A guided setup checks text and link contrast, derives twelve reusable CSS settings, and saves preferences globally or per project.
Create project-specific rules for turning Figma designs into code. The skill examines existing components and styling, then saves conventions for naming, file locations, reusable design values, and implementation steps in the coding agent's rule file.
Write a game design document for one system, such as combat, crafting, or dialogue. Work through sections with specialist agent input, check dependencies against existing designs, and save approved sections with progress records for later continuation.
Build and update Kortix web screens with established interface components and reference layouts. Guides component selection for forms, lists, modals, loading states, and notifications, including replacements for deprecated components and consistent responsive page structure.
Apply Carapace styling to existing OpenClaw interfaces through shared CSS, themes, and semantic tokens—named values for visual roles. Reuse existing components and check interaction states, accessibility, and browser screenshots for consistent presentation.
Define version control for design files, components, and libraries — branching, naming, and release. Use when file history is chaotic. For design system contribution rules, use `design-system-governance` (design-systems).
The English summary is being prepared. Showing the original description.
Define how the system evolves — contribution model, versioning, deprecation, and change management. Use when multiple teams contribute. For driving uptake use `design-system-adoption` (designer-toolkit); for design file history use `version-control-strategy` (design-ops).
The English summary is being prepared. Showing the original description.
Build and maintain a design system inside an Expo app - a reusable theme of design tokens (color, spacing, typography, radius, shadow, motion), reusable component structure with variant/size/state prop conventions, and rules for when to extract a repeated view into a shared component. Use when creating or organizing theme files and design tokens (theme.ts / theme/), extending an existing theme or styling library (NativeWind, Tamagui, Restyle, Unistyles) in its own idiom, standardizing styles so screens (including AI-generated ones) look consistent and polished, fixing an app that looks AI-generated or generic instead of native (the named native-slop tells), building an in-app component library, or auditing an app for design-system drift (hardcoded colors, spacing, fonts). For platform styling specifics (semantic colors, HIG rules, native controls) use expo-native-ui; for folder layout of a new app use expo-project-structure.
The English summary is being prepared. Showing the original description.