Topic · Frontend & Design
Best design systems skills, page 11
Design systems skills, ranked
Ranked by score. Sort bymost stars,trending,newest,recently updated
| # | Skill | Repository | Stars | Used in | Tokens | Auto-check | Licence | Updated |
|---|---|---|---|---|---|---|---|---|
| 481 | Map this token system to or from any external design system (Material Design 3, Apple HIG, Fluent, Carbon, Ant, shadcn/ui, Radix, Chakra, Mantine, Bootstrap…) — adopt their look, build on their… | plugin87/ | 1.6k | — | ~570 | Automated safety check: Pass | MIT | 2 days ago |
| 482 | Build, critique, and iterate high-converting marketing or product landing pages using React + Vite + TypeScript + Tailwind and shadcn/ui components, with all icons sourced from Iconify. | instructa/ | 139 | — | ~1.8k | Automated safety check: Pass | No licence | 11 days ago |
| 483 | 483.Write Unit Tests This rule helps in writing and running unit tests for components of blade design system | razorpay/ | 656 | — | ~1.2k | Automated safety check: Pass | MIT | today |
| 484 | 484.Design System Extract a complete design system from an existing website or screenshot into a DESIGN.md file. | jezweb/ | 1.1k | — | ~2.2k | Automated safety check: Notes | MIT | today |
| 485 | 485.Anti UI Slop Stop coding agents from shipping generic UI. An agent skill from sickn33/agentic-awesome-skills. | sickn33/ | 47k | 1 repo | ~840 | Automated safety check: Pass | MIT | today |
| 486 | 486.Rayden Code Generate React code with Rayden UI components using correct props, tokens, and premium layout patterns | sickn33/ | 47k | 1 repo | ~1.3k | Automated safety check: Pass | MIT | today |
| 487 | 487.UI Lint Quick automated lint — detects common design system violations in seconds | sickn33/ | 47k | 1 repo | ~853 | Automated safety check: Pass | MIT | today |
| 488 | 488.UI Pattern Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives | sickn33/ | 47k | 1 repo | ~726 | Automated safety check: Pass | MIT | today |
| 489 | 489.UI Review Review UI code for design system compliance, accessibility, and best practices | sickn33/ | 47k | 1 repo | ~1.3k | Automated safety check: Pass | MIT | today |
| 490 | 490.UI Setup Interactive setup wizard — guides you step-by-step to configure the design system for your project | sickn33/ | 47k | 1 repo | ~2k | Automated safety check: Pass | MIT | today |
| 491 | 491.UI Tokens View, add, or modify design tokens in the StyleSeed design system | sickn33/ | 47k | 1 repo | ~691 | Automated safety check: Pass | MIT | today |
| 492 | Fetch Jira ticket, create branch, implement changes, commit, push, open PR. | commercetools/ | 154 | — | ~1.6k | Automated safety check: Notes | MIT | 7 days ago |
| 493 | A skill your agent uses when styling UI for ramp.com — references the extracted design system tokens instead of inventing colors, spacing, or typography. | Manavarya09/ | 4.2k | — | ~190 | Automated safety check: Pass | MIT | yesterday |
| 494 | A skill your agent uses when styling UI for raycast.com — references the extracted design system tokens instead of inventing colors, spacing, or typography. | Manavarya09/ | 4.2k | — | ~192 | Automated safety check: Pass | MIT | yesterday |
| 495 | A skill your agent uses when styling UI for replit.com — references the extracted design system tokens instead of inventing colors, spacing, or typography. | Manavarya09/ | 4.2k | — | ~191 | Automated safety check: Pass | MIT | yesterday |
| 496 | Check that the UI you actually rendered uses the design system, by reading computed styles in the running app against the project's design tokens. | reticlehq/ | 1.2k | — | ~1k | Automated safety check: Pass | Apache-2.0 | today |
| 497 | The headless CometChat Chat SDK for React Native — a method → contract map for the fallback path, plus init/login ordering and listener lifecycle. | cometchat/ | 132 | — | ~1.8k | Automated safety check: Pass | MIT | 4 days ago |
| 498 | 498.Shadcn Vue shadcn-vue for Vue/Nuxt with Reka UI components and Tailwind. | secondsky/ | 227 | — | ~3.3k | Automated safety check: Pass | MIT | 11 days ago |
| 499 | 499.UI UX Designer Create interface designs, wireframes, and design systems. An agent skill from aiskillstore/marketplace. | aiskillstore/ | 433 | 7 repos | ~2.4k | Automated safety check: Pass | No licence | today |
| 500 | Rigorous visual validation expert specializing in UI testing, design system compliance, and accessibility verification. | aiskillstore/ | 433 | 7 repos | ~2.5k | Automated safety check: Pass | No licence | today |
| 501 | 501.Design Sync Push a React design system to claude.ai/design. An agent skill from asgeirtj/system_prompts_leaks. | asgeirtj/ | 69k | — | ~7.1k | Automated safety check: Pass | CC0-1.0 | today |
| 502 | Document a multi-component pattern (form validation, empty states, error handling): when to use, composition, states, a11y, anti-patterns. | murphytrueman/ | 206 | — | ~3.7k | Automated safety check: Pass | MIT | 15 days ago |
| 503 | A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Provide audio descriptions for video. | thedaviddias/ | 74k | — | ~549 | Automated safety check: Pass | MIT | 3 days ago |
| 504 | A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid autofocus on form fields. | thedaviddias/ | 74k | — | ~508 | Automated safety check: Pass | MIT | 3 days ago |
| 505 | 505.Autoplay Media A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid autoplaying media. | thedaviddias/ | 74k | — | ~515 | Automated safety check: Pass | MIT | 3 days ago |
| 506 | 506.Cascade Layers A skill your agent uses when reviewing a CSS architecture for specificity issues, setting up a design system, or migrating a large codebase from utility-first to a layered architecture. | thedaviddias/ | 74k | — | ~514 | Automated safety check: Pass | MIT | 3 days ago |
| 507 | 507.Color Oklch A skill your agent uses when building a design token system, creating accessible colour palettes, generating colour ramps programmatically, or migrating a design system to support wide-gamut displays. | thedaviddias/ | 74k | — | ~564 | Automated safety check: Pass | MIT | 3 days ago |
| 508 | A skill your agent uses when reviewing rendered HTML, layout components, or design-system patterns that may depend on presentation for meaning. | thedaviddias/ | 74k | — | ~548 | Automated safety check: Pass | MIT | 3 days ago |
| 509 | A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Hide decorative elements from assistive technology. | thedaviddias/ | 74k | — | ~672 | Automated safety check: Pass | MIT | 3 days ago |
| 510 | 510.Empty Links A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Fix empty and broken links. | thedaviddias/ | 74k | — | ~508 | Automated safety check: Pass | MIT | 3 days ago |
| 511 | 511.Flashing Content A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Prevent seizure-triggering flashing content. | thedaviddias/ | 74k | — | ~530 | Automated safety check: Pass | MIT | 3 days ago |
| 512 | 512.Focus Order A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure logical focus order. | thedaviddias/ | 74k | — | ~519 | Automated safety check: Pass | MIT | 3 days ago |
| 513 | 513.Form Labels A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Associate labels with form controls. | thedaviddias/ | 74k | — | ~565 | Automated safety check: Pass | MIT | 3 days ago |
| 514 | A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Use logical heading hierarchy. | thedaviddias/ | 74k | — | ~516 | Automated safety check: Pass | MIT | 3 days ago |
| 515 | A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Use inclusive language. | thedaviddias/ | 74k | — | ~520 | Automated safety check: Pass | MIT | 3 days ago |
| 516 | 516.Link Text A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Use descriptive link text. | thedaviddias/ | 74k | — | ~534 | Automated safety check: Pass | MIT | 3 days ago |
| 517 | 517.Parallax Effects A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Provide alternatives to parallax effects. | thedaviddias/ | 74k | — | ~523 | Automated safety check: Pass | MIT | 3 days ago |
| 518 | 518.Reduced Motion A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Respect reduced motion preferences. | thedaviddias/ | 74k | — | ~534 | Automated safety check: Pass | MIT | 3 days ago |
| 519 | 519.Semantic Lists A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Use semantic list elements. | thedaviddias/ | 74k | — | ~504 | Automated safety check: Pass | MIT | 3 days ago |
| 520 | A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid sensory-only instructions. | thedaviddias/ | 74k | — | ~533 | Automated safety check: Pass | MIT | 3 days ago |
| 521 | 521.Text In Images A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid images of text. | thedaviddias/ | 74k | — | ~514 | Automated safety check: Pass | MIT | 3 days ago |
| 522 | 522.Text Resizing A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Support text resizing to 200%. | thedaviddias/ | 74k | — | ~509 | Automated safety check: Pass | MIT | 3 days ago |
| 523 | 523.Zoom Reflow A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Support content reflow at 400% zoom. | thedaviddias/ | 74k | — | ~530 | Automated safety check: Pass | MIT | 3 days ago |
| 524 | Edit the @posthog/quill design system locally and consume the change in products/desktop before it is published to npm. | PostHog/ | 40k | — | ~1.3k | Automated safety check: Pass | Unknown | today |
| 525 | 525.Openforms Mui Author, render, preview and debug OpenForms FormSchemaJSON form definitions as idiomatic, themed, accessible MUI (React). | BlackBeltTechnology/ | 315 | — | ~2.3k | Automated safety check: Pass | MIT | today |
| 526 | 526.Harness Gui Develop or review Harness Anything GUI pages and shared components using its existing design system, entity navigation, motion preferences, and background Electron verification. | FairladyZ625/ | 226 | — | ~2.3k | Automated safety check: Pass | AGPL-3.0 | today |
| 527 | 网页与数字界面设计师和网页开发工程师在需要逆向分析网页截图时，使用本技能一键提取配色、排版及组件特征，自动生成结构化 Design System 数据与 AI Coding Prompt，让设计还原与前端开发更高效。 | anbeime/ | 7.8k | — | ~660 | Automated safety check: Pass | No licence | today |
| 528 | 528.Slate Plan Review Slate v2 architecture/API plans against React 19.2 runtime performance, Slate-close unopinionated DX, legacy-regression proof, research evidence, and shadcn-style composability; write a… | udecode/ | 17k | — | ~15k | Automated safety check: Warn | Unknown | today |
Explore related skills
More topics in Frontend & Design
- Accessibility1,036
- UI design477
- Landing pages452
- React components451
- Internationalization416
- Typography399
- Design tokens390
- Frontend development361
- CSS and styling346
- Theming and dark mode332
- Web performance312
- HTML artifacts275
- State management274
- Static sites and blogs272
- UX design268
- Responsive design257
- Web animation and motion190
- Forms and validation179
- Design to code106
- Icons and illustration64