agentsclimarketplace
Sign in

Shelves Design & frontend

Components & layout

883 rows from 365 repositories

Building the pieces a page is assembled from.

What Components & layout skills agree on

298 skill files read, by 293 of the 305 authors on this shelf whose files we hold, 2026-09-06

The middle one of the 42 measured here is ~1.8k tokens long, counted with cl100k_base

Counted by distinct author, so one author publishing three of these counts once. Where a claim sits in fewer files than authors, that is said: a claim held by forty authors across three files is one file people copied, not forty people who agreed. Near-identical wordings are grouped and the other wordings are shown, so the grouping is yours to check.

What they tell the agent to do

  1. Start with a --design-system search before designing17 of 293 in 15 filesalso worded as Always start with the --design-system search; Start with the --design-system search
  2. Ensure 4.5:1 minimum text contrast16 of 293 in 15 filesalso worded as Maintain 4.5:1 text contrast minimum; ensure text contrast of at least 4.5 to 1
  3. Verify the pre-delivery checklist before delivering UI code16 of 293 in 14 filesalso worded as Run the pre-delivery checklist before delivering UI; Verify the pre-delivery checklist before delivering
  4. Use SVG icons instead of emojis15 of 293 in 14 filesalso worded as Use SVG icons, not emojis; Use SVG icons instead of emoji
  5. Keep touch targets at least 44 points14 of 293 in 12 filesalso worded as Keep touch targets at least 44pt; Keep touch targets at least 44x44px
  6. Check page override files before master rules13 of 293 in 11 filesalso worded as Check page-level overrides before building pages; check page overrides before applying master rules
  7. Supplement with domain searches as needed13 of 293 in 11 filesalso worded as Supplement with --domain searches for detail; Supplement with --domain searches as needed
  8. Add cursor-pointer to all clickable elements12 of 293also worded as Add cursor-pointer to every clickable element; Add cursor-pointer to clickable elements
  9. Use CSS variables for theming11 of 293 in 7 filesalso worded as Use CSS variables from globals.css for theming; Customize theme through CSS variables
  10. Use semantic color tokens, not raw hex11 of 293 in 8 filesalso worded as Use semantic tokens instead of raw colors; Use semantic color tokens only
  11. Meet WCAG AA color contrast11 of 293 in 7 filesalso worded as Ensure WCAG AA color contrast; Meet WCAG AA contrast ratios
  12. Default stack to html-tailwind when unspecified10 of 293also worded as Default to html-tailwind stack when unspecified; Default to html-tailwind when stack is unspecified
  13. Analyze product type, audience, style, and stack first10 of 293 in 9 filesalso worded as Analyze product type, audience, style keywords, and stack first; Analyze product type, style, industry, and stack
  14. Test both light and dark modes before delivery8 of 293also worded as Test both light and dark modes
  15. Check dark mode contrast independently8 of 293 in 6 filesalso worded as Verify dark mode contrast independently; confirm dark mode contrast independently

What they tell it not to do

  1. Never use emojis as UI icons28 of 293 in 26 filesalso worded as Never use emoji as icons; Never use emojis as structural icons
  2. No horizontal scroll on mobile15 of 293 in 14 filesalso worded as Don't allow horizontal scroll on mobile; Never allow horizontal scrolling on mobile
  3. Never hardcode colors or UI text11 of 293also worded as Never hardcode colors or UI text.; Never hard-code hex colors
  4. Don't use hover transforms that shift layout10 of 293also worded as Never use hover scale transforms that shift layout; Hover scale transforms that shift layout
  5. Never block user input during animations9 of 293 in 7 filesalso worded as Never block input during animation; Never block user input during an animation
  6. Never disable viewport zoom9 of 293 in 7 filesalso worded as never disable viewport zooming; Never disable zoom
  7. Don't convey information by color alone9 of 293 in 7 filesalso worded as Never convey meaning by color alone; Do not convey meaning by color alone
  8. Don't rely on hover-only interactions9 of 293 in 7 filesalso worded as don't rely on hover alone; Never rely on hover as the only interaction
  9. Never override accessibility features8 of 293 in 4 filesalso worded as Never override accessibility requirements for aesthetics
  10. Never let content hide behind fixed navbars8 of 293also worded as No content hidden behind fixed navbars; Don't let content hide behind fixed navbars

What they expect to be installed

  1. python324 of 293 in 21 files
  2. Tailwind CSS24 of 293 in 22 files
  3. npm19 of 293 in 15 files
  4. grep19 of 293
  5. Storybook17 of 293
  6. shadcn/ui MCP14 of 293 in 12 files
  7. shadcn/ui11 of 293
  8. search.py10 of 293 in 9 files
  9. class-variance-authority10 of 293 in 6 files
  10. tailwind-merge9 of 293 in 6 files

What they ask it to produce

  1. design-system/MASTER.md14 of 293 in 12 filesalso worded as design-system MASTER.md file; design-system MASTER.md
  2. Implemented UI code13 of 293 in 11 filesalso worded as UI code implementing the design; UI code implementing the design system
  3. Page-specific override markdown files11 of 293 in 9 filesalso worded as page-specific design override markdown; Page-specific override files
  4. design-system/pages/<page>.md9 of 293 in 8 filesalso worded as design-system/pages/<page>.md overrides; design-system/pages/<page>.md override file
  5. components.json configuration6 of 293 in 5 filesalso worded as components.json project configuration; components.json
  6. Recommended navigation pattern with rationale5 of 293 in 3 files
  7. Layout hierarchy from root container down5 of 293 in 3 files
  8. Size class behavior at each transition5 of 293 in 3 files

When Components & layout authors say to reach for one

The situations these authors wrote into their own files, counted out of the same 293 authors, with the skills that name each one

How Components & layout skills are built

795 skill directories by 339 authors, read from their repositories’ own file trees 2026-08-05

The middle bundle among those shipping files is 5 files, 33.9 KB beside SKILL.md

Counted by distinct author, same as above, so one author publishing forty template copies counts once. SKILL.md itself is not counted as a file, so a single-file skill is one where that file is the whole skill.

The shape

  1. SKILL.md is the whole skill107 of 339 authors, 279 of 795 skills
  2. files ship beside it232 of 339 authors, 516 of 795 skills
  3. executable scripts ship inside91 of 339 authors, 131 of 795 skills

The folders they converge on

  1. references/148 of 339 authors, 278 of 795 skills
  2. scripts/83 of 339 authors, 118 of 795 skills
  3. agents/45 of 339 authors, 76 of 795 skills
  4. evals/44 of 339 authors, 67 of 795 skills
  5. data/40 of 339 authors, 47 of 795 skills
  6. assets/39 of 339 authors, 54 of 795 skills

  • Svelte MCP

    sveltejs/ai-tools/dev.svelte/mcp MCP server

    306★ repo

    The official Svelte MCP server providing docs and autofixing tools for Svelte development

  • Storybook MCP Addon

    storybookjs/mcp/io.github.storybookjs/addon-mcp MCP server

    265★ repo

    Help agents automatically write and test stories for your UI components.

  • Svelte llm mcp

    khromov/svelte-llm-mcp/garden.stanislav.svelte-llm/svelte-llm-mcp MCP server

    160★ repo

    An MCP server that provides access to Svelte 5 and SvelteKit documentation

  • UI UX PRO MAX

    liyupi/github-claw/.agents/skills/UI-UX-PRO-MAX Skill

    no license68★ repo

    用 GitHub 打造 AI 智能体：长期记忆 + AI Agent 技能包（UI/UX、图片生成、SEO）+ GitHub Actions 自动化 + Copilot 编程 Agent，支持 Vibe Coding 快速孵化项目。

  • Webflow to react

    dmenchaca/webflow-to-react Skill

    27★

    Agent skill to migrate a Webflow site to React.

  • Shadcn

    gabrielkuettel/vibekit/.agents/skills/shadcn Skill

    26★ repo

    The agentic stack for Algorand builders.

  • Shadcn component discovery

    mattbx/shadcn-skills/skills/shadcn-component-discovery Skill

    15★ repo

    Skills for building better shadcn/ui apps. Discover 1,500+ existing components before building custom, and review components against shadcn patterns & theme styles (Vega, Nova, Maia, Lyra, Mira).

  • FileMaker XMLsnippet Layout Claude Skill

    andykear/FileMaker-XMLsnippet-Layout-Claude-Skill Skill

    no license10★

    Reverse-engineered specification of FileMaker's undocumented layout XML format (fmxmlsnippet LayoutObjectList). All 18 object types covered, flags decoded, element order confirmed, verified against production layouts. Packaged as a Claude skill that generates pasteable layout XML.

  • Wechat editorial layout skill

    niuer/wechat-editorial-layout-skill Skill

    no license5★

    一个用于公众号文章排版的 Agent Skill，可将 Markdown、Word 和纯文本整理成可直接粘贴到微信公众号编辑器的 HTML。

  • Layout discipline

    crazyzlnofficial/layout-discipline/layout-discipline Skill

    4★ repo

    Layout Discipline · 排版规范 ：一个给 AI 写网页 / HTML 用的 Agent Skill——统一字号档位、4px 间距栅格、卡片规范与颜色变量，附零依赖自动体检脚本。An Agent Skill that enforces layout rules on AI-generated HTML: a fixed type scale, 4px spacing grid, card specs, color tokens, and a zero-dependency check script.

  • Super design

    Eldergenix/SUPER-DESIGN/skill/skills/super-design Skill

    3★ repo

    SUPER-DESIGN.md

  • Frontend code review

    DNM03/frontend-code-review/skills/frontend-code-review Skill

    3★ repo

    Agent skills for production-ready frontend code reviews across React, Next.js, TypeScript, accessibility, UX, performance, and SEO.

  • Admin ui svelte

    lindoelio/my-agent-skills/admin-ui-svelte Skill

    no license3★ repo

    A collection of reusable Agent Skills for AI-powered development tools.

  • Ui design workflow

    FrozenMoon/ui-design-workflow Skill

    3★

    UI workflow for production-grade Vibe Coding projects

  • Wes bos sick picks

    boserup/wes-bos-sick-picks/skills/wes-bos-sick-picks Skill

    2★ repo

    Claude Code skill for building frontend UI the Wes Bos way: research pitfalls and modern platform features before planning, design accessible (WCAG) components with native HTML/CSS, then verify the approach against Wes Bos on X + trusted sources (MDN, web.dev, CSS-Tricks). Framework-agnostic.

  • Screenshot to design system

    WCF900905/screenshot-to-design-system Skill

    2★

    Agent Skill for Cursor, Claude Code & Codex: turn UI screenshots into design tokens and a 24-category component library demo.

  • Lovable design system

    Mine77/lovable-design-skills/skills/lovable-design-system Skill

    no license2★ repo

    A Lovable-inspired design skill for AI coding agents to create distinctive, production-grade frontend UI.

  • High plains drifter

    alexconner-79/high-plains-drifter Skill

    2★

    Claude skill: aligns a Figma design or scrappy code to your real Storybook components. Never reconstructs, never invents.

  • Wcag accessibility

    salawi45/skill-wcag-accessibility/wcag-accessibility Skill

    1★ repo

    A Claude skill for WCAG 2.2 AA accessibility — component advisor, test runner, issue reporter, and jurisdiction mapping for ADA, Section 508, EAA, and AODA

  • Astrojs expert skill

    joncutrer/astrojs-expert-skill Skill

    no license1★

    HappyCapy skill for expert Astro (v5 + v6) guidance — Islands Architecture, Content Collections, Live Collections, SSR/SSG, integrations, and v6 migration

  • Gutenberg layout

    iwritec0de/wp-dev/skills/gutenberg-layout Skill

    1★ repo

    WordPress development plugin for Claude Code

  • Bento layout director

    lightrainstech/claude-design-prompt-pack/skills/bento-layout-director Skill

    no license1★ repo

    Reusable Claude prompts for bento-grid visuals, brand files, mockups, and design workflows.

  • Atelier components

    luminary19/atelier/skills/atelier-components Skill

    no license1★ repo

    Atelier - a premium, anti-slop frontend design skill suite for Claude Code: 11 skills + a deepdive knowledge base.

  • Bits ui

    BetaHuhn/skills/bits-ui Skill

    1★ repo

    A collection of skills for use with AI coding tools

  • Accessibility

    michelve/hugin-cowork/skills/accessibility Skill

    1★ repo

    A Cowork plugin that helps **product designers and engineers ship design-to-production React apps** — translating Figma mockups into accessible, production-ready components with best-practice enforcement for React 19, TypeScript, Tailwind CSS v4, and shadcn/ui.

  • Design md to shadcn

    douinc/agent-skills/skills/design-md-to-shadcn Skill

    1★ repo

    Agent skills for Claude Code, Copilot, Codex, and Gemini CLI — Figma icons (Iconify), logos (SVGL), Korean UX Writing, and more.

  • Shadcn component lock

    MonkeyUI-dev/shadcn-component-lock Skill

    1★

    Agent Skill that locks stock shadcn/ui primitives so Vibe Coding agents (Cursor, Copilot, Codex, Claude Code…) never edit them in place.

  • Web taste

    sonhaicoder/web-taste-skill/skills/web-taste Skill

    1★ repo

    Anti-slop web frontend skill for AI coding agents. Auto-trigger every web task. Force Kimi/Lovable-tier quality with Discovery Form + 5 deterministic directions + 27 anti-patterns + ready-to-paste hero/section/motion blueprints. Distilled from open-design, taste-skill, impeccable.style, getdesign.md, kimi.com, lovable.dev.

  • Ui arsenal

    umararshad4/skill-arsenal/ui-arsenal Skill

    1★ repo

    A growing arsenal of Claude Agent SDK skills for serious frontend, design, and engineering work. Currently ships ui-arsenal: premium component-library expert for React + Next.js + Tailwind.

  • Social cover layout

    ChuluuMGL/social-cover-layout Skill

    1★

    Platform-aware Agent Skill for original social covers, layered typography, color systems, and quality-gated image generation.

  • Accessibility

    Deadlymind/nanolama/skills/accessibility Skill

    1★ repo

    A portable Claude Code skills library (plugin) for a Django 5.2 + Next.js 16 house stack: 30 model-agnostic, tenant-isolation-and-security-first skills.

  • Ui designer

    sonkd/Figma-MCP-x-Claude/ui-designer Skill

    no license0★ repo

    design system refactor plan

  • Vite 2 next

    JDhruv14/vite-2-next/skills/vite-2-next Skill

    0★ repo

    Agent skill to migrate React+Vite+Tailwind apps to Next.js 16

  • React laravel frontend

    HlibPanchenko/react-laravel-frontend-skill/react-laravel-frontend Skill

    0★ repo

    A Claude Skill for senior-grade React frontend development against Laravel APIs

  • Sitesmith

    byensitmagnus/sitesmith/skills/sitesmith Skill

    0★ repo

    A coding-agent skill for building websites that don't look AI-generated. Routes by mode, enforces a 12-step build loop, and renders and measures the result instead of stopping at the code.

  • Shadcn svelte

    j13z/j13z-svelte-essentials/agent-skills/dist/shadcn-svelte Skill

    no license0★ repo

    Svelte / SvelteKit agent skills, defaults, coding guidelines and patterns

  • App layout architecture

    Chagai33/my-agent-skills/app-layout-architecture Skill

    no license0★ repo

    My personal collection of custom AI Agent Skills for Claude Code. Contains production-grade architectural patterns and workflows for React, Firebase, Tailwind CSS, and Zustand.

  • Accessibility

    michelve/accessibility Skill

    0★

    WCAG 2.2 AA accessibility skill for Claude Code, covers ARIA, keyboard navigation, screen readers, axe-core, VPAT, and accessible React/shadcn/ui patterns. 100% trigger recall on 20-query eval set.

  • React pdf kit custom layout

    react-pdf-kit/agent-skills/skills/react-pdf-kit-custom-layout Skill

    0★ repo

    Skills to help developers using AI agents with React PDF Kit library

  • Shadcn forms

    drlorenesi/skills/shadcn-forms Skill

    0★ repo

    Agent skills for Claude Code — npx skills add drlorenesi/skills

  • Cjk layout audit

    sichengchen/cjk-layout-skills/cjk-layout-audit Skill

    0★ repo

    Agent skills for Chinese, Japanese, and Korean text layout. 日本語組版 / 中文排版 / 한국어 텍스트 레이아웃 agent skills.

  • Web prototype designer

    Gnilevell/web-prototype-designer Skill

    0★

    A staged Codex skill for designing and validating interactive web prototypes

  • Playwright spatial layout mcp

    vola-trebla/playwright-spatial-layout-mcp/io.github.vola-trebla/playwright-spatial-layout-mcp MCP server

    0★ repo

    MCP server that gives AI agents geometric spatial awareness of web page layouts using Playwright

  • Fd

    dgk-dev/dgk-gpt/skills/fd Skill

    52★ repo

    Safe Codex CLI setup installer with skills, AGENTS.md, profiles, and MCP defaults

  • Shadcn component review

    mattbx/shadcn-skills/skills/shadcn-component-review Skill

    15★ repo

    Skills for building better shadcn/ui apps. Discover 1,500+ existing components before building custom, and review components against shadcn patterns & theme styles (Vega, Nova, Maia, Lyra, Mira).

  • Agentic webdesign shadcn chat

    S3YED/appie-kit/skills/agentic-webdesign-shadcn-chat Skill

    6★ repo

    Build Your Own AI Employee. The complete starter kit for OpenClaw + Hermes Agent. 155 deduplicated skills, drag-and-drop workspace, case studies, install scripts.

  • Web design

    minorcell/skills/skills/web-design Skill

    5★ repo

    A collection of skills distilled from minorcell's own workflows and useful practices from others.

  • Svar svelte

    svar-widgets/skills/svar-svelte Skill

    no license2★ repo

    Skills and LLM context packs for accurate code generation for SVAR React, Svelte, and Vue.

  • Add react i18n

    landim32/awesome-ai-skills/skills/add-react-i18n Skill

    1★ repo

    Claude AI Skills repository

  • Ui ux pro max

    krlan/leverbrain/.agents/skills/ui-ux-pro-max Skill

    no license1★ repo

    Web3 skill marketplace for agents and operators

  • Responsive layout diagnosis

    shahroz-a/skills/skills/responsive-layout-diagnosis Skill

    1★ repo

    Original, tested agent skills for interface reviews, product quality, accessibility, motion, and responsive UI work.

  • Designing in figma

    Studio-Moser/skills-n-stuff/plugins/figma-design/skills/designing-in-figma Skill

    0★ repo

    Product research, market intelligence, and content tools for AI-native teams

  • Reactprinciples component

    sindev08/react-principles-skills/skills/reactprinciples-component Skill

    0★ repo

    Claude/Cursor/AI skills for React Principles cookbook patterns

  • Auto layout refactor

    Hosseinkm89/figma-skills/auto-layout-refactor Skill

    0★ repo

    Claude Skills for product designers working in Figma — design systems, layout cleanups, Plugin API automation.

  • Svelte authoring

    j13z/j13z-svelte-essentials/agent-skills/dist/svelte-authoring Skill

    no license0★ repo

    Svelte / SvelteKit agent skills, defaults, coding guidelines and patterns

  • Blazing story story

    BlazingStory/agent-skills/skills/blazing-story-story Skill

    0★ repo

    Collection of agent skills for Blazing Story, enabling AI coding assistants to implement stories and addons in Blazing Story projects.

  • Ui ux pro max

    95-yn/tuttikit/.claude/skills/ui-ux-pro-max Skill

    0★ repo

    自己跑、自己改、自己说了算的简易多 Agent 框架 · Conductor + Sub-agents · Skills + MCP · 多设备同步

  • Cjk layout

    sichengchen/cjk-layout-skills/cjk-layout Skill

    0★ repo

    Agent skills for Chinese, Japanese, and Korean text layout. 日本語組版 / 中文排版 / 한국어 텍스트 레이아웃 agent skills.

  • Adaptive layout

    zakariaf/Flutter-Skills/skills/adaptive-layout Skill

    0★ repo

    General, reusable Flutter engineering skills for AI coding agents — architecture, Riverpod 3.x, testing, persistence, i18n/RTL, accessibility, navigation & more. Agent Skills open standard; works with Claude Code, Cursor, Codex & 70+ agents.

  • Shadcn ui

    nexu-io/open-design/skills/shadcn-ui Skill

    85,608★ repo

    🎨 The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen & 20+ CLIs via BYOK.

All 883 in the catalog