859 tagged design-system, measured the same way as everything else here.
Browse within: design-tokens 390claude-code-plugin 194codex-cli 182frontend-development 182accessibility 138ai-tools 126agentic 120figma 104claude-code-skills 90skills 88ai-design 87nextjs 69tailwindcss 57korea 54
Skill Claude Code ✓ vendor
Enhances auto-generated spectrum-design-data PRs from spectrum-tokens-studio-data sync (branch tokens-sync/patch-spectrum2-from-main, author mrcjhicks). Diagnoses CI failures, suggests fixes, creates changesets with token-changeset-generator, updates PR title/body, and attributes the original Tokens Studio…
Skill Claude CodeCodex
Use when building Figma plugins, creating design automation tools, implementing sandbox/UI communication, or working with the Figma Plugin API for node manipulation, styles, and components.
Skill Claude CodeCodex
Creates a new DB UX Design System component with Mitosis source, SCSS, typed model, and Playwright tests.
Skill Claude CodeCodex
Open Analytics' design language, extracted from the shipped product: an ink-derived neutral system, squircle surface anatomy, one small spring vocabulary, pixel-matched skeletons, and a plain-spoken copy voice, with type-checked component recipes. Use this whenever you build or restyle a dashboard, SaaS app, analytics…
Skill Claude CodeCodex
A set of instructions for building and reviewing product front ends, meaning the visible part of an application that users interact with. It covers pages, components, forms, data flow, layout, styling, responsive behavior, and animations.
Skill Claude CodeCodex
Build a frontend with a deliberate visual direction held through palette, typography, structure, and texture, with on-screen strings that name real information rather than fabricated demo data or filler labels. Use when building or restyling a frontend.
Skill Codex
Use when creating, redesigning, or reviewing web interfaces that need product-specific structure, clear hierarchy, responsive composition, accessible interaction, or relief from generic AI-generated SaaS aesthetics. Adapt grid, typography, imagery, motion, and product evidence to the established brand—including…
HorusGoul/eslint-plugin-react-render-types
Skill Claude CodeCodex
Install and configure eslint-plugin-react-render-types in a TypeScript React project. Use when: (1) adding eslint-plugin-react-render-types to a project, (2) configuring ESLint flat config with typed linting for @renders support, (3) troubleshooting typed linting errors or plugin configuration, (4) setting up…
Skill Claude CodeCodex
Production framework styler and surgical RTL UI polish engine with Contextual Decision Layer (CDL). Operates directly inside existing codebases across React/Next.js, PHP, WordPress, and Vanilla HTML/CSS/JS. Trigger on commands 'brief', 'component', 'section', 'page', 'redesign', 'typography', 'palette', 'layout'…
skydashnet/material-design-3-ui-skill
Skill Claude CodeCodex
Design, redesign, review, or implement user interfaces using Google Material Design 3 (M3), Material You, and optional Material 3 Expressive principles. Use for UI/UX screens, app flows, design systems, component selection, theming, responsive/adaptive layouts, accessibility audits, Figma-ready specifications, or…
Skill Codex
Create or refresh Morphous website design-system/theme bundles from animal, insect, plant, landscape, mineral, weather, or other nature motifs. Use when Codex is asked to generate Morphous motif images, light/dark design-system boards, reusable image prompts, generated web assets, shadcn/tweakcn theme exports, or the…
Skill Claude Code
End-to-end DS release — publish bumped packages with lerna, generate a changelog from GitLab MRs, create a Jira release task plus a GitLab release, post a two-audience release changelog to the Teams releases channel, and optionally open DS-upgrade branches/MRs in the portal-ui-bridge and portal-next consumer repos.
Skill Cursor
Create a new Spark UI component with complete file structure including component, styles, tests, stories, and documentation. Use when the user wants to create a new component or add a component to the design system.
Ocean-Industries-Concept-Lab/openbridge-webcomponents
Skill Claude Code
Rewrite the comments under a path to the repo's comment rules (why-only, ≤ 3 lines, no history, no filler). Manual only.
touchine-ojo/OJO-Design-Skills
Skill Claude CodeCodex
Comprehensive App UI/UX design best practices. Supports two tracks: Convention Track (adopt a proven design language for SaaS/utility products) and Innovation Track (multiple brand-driven design methodologies — Material Metaphor, archetype-driven, narrative-driven, cultural-semiotic — for brand-driven products). Use…
Skill Claude CodeCodex
Airbnb's UI design system. Use when building interfaces inspired by Airbnb's aesthetic - light mode, Inter font, 4px grid.
Skill Claude CodeCodex
Be a design director, grounded in OpenDesign (opendesign.cc) — a curated library of 1,400+ real, machine-readable design systems, each with an 11-layer token spec extracted from the live site and verified against actual computed styles. Use whenever someone wants to design or build a website, landing page, dashboard…
jpoindexter/design-md-extractor
Skill Claude CodeCodex
Extract and document the visual style of public websites as reusable DESIGN.md files. Use when the user asks to analyze a website's design system, extract styles, create design tokens, produce DESIGN.md, generate an agent-readable style guide, or build from a website's visual language.
Skill Claude Code
Extract a website's design system into a DESIGN.md file. Use when starting a new frontend project, rebuilding a site, or when the user wants AI-generated UI to match an existing brand.
Skill Claude CodeCodex
A guide for choosing and building data visualizations, such as charts, maps, graphs, and 3D views, based on the data and the question it should answer.
Skill Claude CodeCodex
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for…
Skill Codex
Build, fix, review, install, and validate Balsa UI open-code components for Vue applications. Use for focused Balsa repository maintenance, Vue UI built from Balsa components, compositions or blocks, semantic tokens, registry metadata, accessibility behavior, and installed-source update safety. Scale the workflow from…
Skill Claude CodeCodex
Buttons, inputs, pills, badges, calendars, and other interactive components form a visual family — they share the same border-radius, colour logic, shadow scale, border style, and spacing rhythm. Inconsistency between them breaks the sense of a coherent product. Use when building or reviewing a component library…
Skill Claude CodeCodex
A workflow for fixing cases where MasterGo design files do not import into Figma with the same visual result as a reference screenshot or structure.
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: