frontend-ui-ux
lza6/claw-code-tingfeng/skills/frontend-ui-ux/SKILL.md
Designer-developer for UI/UX work
Skills real projects publish on GitHub, most starred first. Each one says what it will make an agent do before you copy it.
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
lza6/claw-code-tingfeng/skills/frontend-ui-ux/SKILL.md
Designer-developer for UI/UX work
xenitV1/Antigravity-Workflows/skills/frontend-design/SKILL.md
Design thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.
Often used withinstantly-campaignecosystem-referencebrief-to-tasks
pwndoc/pwndoc/.claude/skills/test-frontend-e2e/SKILL.md
Generates Playwright E2E specs for PwnDoc. Tests run against the full stack (frontend + backend + MongoDB) with pre-authenticated browser sessions. Run with ./pwndoc-cli test --frontend-e2e.
Ilm-Alan/frontend-design/SKILL.md
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.
Often used withinstantly-campaignecosystem-referencebrief-to-tasks
ceilf6/FrontAgent/skills/frontend-design/SKILL.md
Create distinctive, production-grade frontend interfaces with a clear visual direction while respecting project design specification constraints, existing design systems, and minimal-diff engineering boundaries. Use when building or restyling pages, landing screens, dashboards, marketing surfaces, or other frontend UI where visual quality materially affects the result.
Often used withinstantly-campaignecosystem-referencebrief-to-tasks
avibebuilder/claude-prime/.claude/skills/frontend-design/SKILL.md
Builds distinctive, production-grade UIs that avoid generic AI aesthetics. Use whenever the user wants to build, restyle, or give visual direction to any interface — pages, dashboards, landing pages, components, onboarding flows, mobile screens, or design systems — even without an explicit 'design' request. Also triggers for: picking an aesthetic direction, improving the look of a dull/generic existing page, adding visual personality, or choosing colors/typography. Includes a bundled design intelligence database for concrete guidance across web (React, Next.js, Vue, Tailwind) and mobile (React Native, Flutter, SwiftUI).
Often used withinstantly-campaignecosystem-referencebrief-to-tasks
itseffi/agentic-os/.agents/skills/frontend-design/SKILL.md
Design implementation-ready frontend solutions with UX intent, component structure, responsive behavior, accessibility, and handoff criteria.
Often used withinstantly-campaignecosystem-referencebrief-to-tasks
butterbase-ai/butterbase-plugin/skills/journey-frontend/SKILL.md
Use as the frontend build stage of the Butterbase journey. Implements the Frontend section of 02-plan.md by delegating to deploy-frontend. Scaffolds (if needed) and deploys via create_frontend_deployment + manage_frontend (start_deployment). Sets VITE_API_URL and VITE_APP_ID env. Skipped if the plan is API-only.
actionow-ai/frontier/skills/frontend-brand/SKILL.md
为已有前端项目做品牌视觉交付:Logo 生图提示词包(prompt 交付,用户自选模型生图)、OG 社交分享图(1200x630 代码渲染)、Landing page 设计(调度 graphite landing 骨架)。当用户说「做个 logo」「设计 logo」「生成 OG 图/分享图」「做落地页/landing」「品牌视觉」时触发。基于项目既有设计体系提取品牌基因(brand-profile.md),不凭空设计。与 brandkit(纯出图引擎)分工:本 skill 交付工程集成的 prompt 包与代码产物,需要直接生成品牌板图片时可转 brandkit。
CSOAI-ORG/councilof-ai/.claude/skills/coai-frontend/SKILL.md
Subject-matter expert for the Council of AI (councilof.ai) front end — its architecture, the EU-gov-style library IA, the 8 content sectors, the naming canon, the deploy path, and the align-not-delete cleanup process. Load for any councilof.ai front-end work: cleanup, alignment, new pages, deploys.
Gladiarn/Glad-Personal/skills/glad-frontend/SKILL.md
Make frontend UI backend-ready by construction — no hardcoded display data anywhere, everything flows through state backed by a swappable mock/real data layer via a repository pattern, with loading/error/empty states genuinely exercised. This skill owns data architecture only, never visual design — pair it with frontend-design/impeccable/web-design-guidelines (or whatever design skill is active) for how the UI should look. Use whenever the user asks to build a new page, component, table, list, dashboard, or form before a backend/API exists, wants the frontend "ready to plug in the backend later," or is scaffolding UI ahead of API availability.
Zenobia000/agent-skills-starter/.claude/skills/frontend-spec/SKILL.md
為有 UI 的規格產出前端規格書與 Pencil 設計稿:路由表、每頁 design brief、四態畫面(Loading/Empty/Error/Success)的 .pen mockup。在 /to-spec 之後、/to-tickets 之前跑,可選。
PaulRBerg/agent-skills/skills/frontend-design/SKILL.md
browser skill for rendered verification when available, otherwise the host's DevTools/browser tool. name: frontend-design skill-dependencies: - chromium-browser description: Use when creating or substantially redesigning web interfaces, landing
Often used withinstantly-campaignecosystem-referencebrief-to-tasks
alessiogarifo92/claude-skills/vue-frontend/SKILL.md
Use when writing or reviewing Vue components - composables, state ownership, props/emits design, accessibility, or loading/empty/error UI states
AlpayC/claude-skill-set/skills/tdd-frontend/SKILL.md
Test-first discipline for UI work — the seam comes from the spec, the failing test comes before the code, the assertion describes what the user experiences. Use it when a step's behaviour is specifiable before it is built.
and-lz/Claude-skills/web-frontend/SKILL.md
ALWAYS use for ANY web frontend, React, Next.js, Tailwind CSS, or modern CSS request — non-negotiable. Triggers on React, Next.js, App Router, RSC, Server Components, Server Actions, use(), useOptimistic, useFormStatus, useActionState, Suspense, Tailwind CSS, @theme, @variant, container queries, :has(), subgrid, view transitions, scroll-driven animations, color-mix(), oklch, CSS layers, CSS nesting, anchor positioning, TypeScript, Core Web Vitals, LCP, CLS, INP, Lighthouse, bundle optimization, image optimization, next/image, next/font, Vitest, Playwright, Testing Library, WCAG, ARIA, semantic HTML, keyboard navigation, screen reader, React 19, Next.js 15, Tailwind v4, middleware, ISR, streaming, RSC payload, Zustand, React Query, TanStack, Zod, React Hook Form, Radix, shadcn/ui, Framer Motion, CSS modules, PostCSS, responsive design, mobile-first, dark mode, color scheme, design tokens, i18n, next-intl, route groups, parallel routes, intercepting routes, generateMetadata, opengraph-image, sitemap, robots, edge runtime, turbopack, Vercel, Netlify, Cloudflare Pages, SSR, SSG, ISR, PPR, partial prerendering. Also triggers on "my app/page/component", "build/design a page", navigation, sidebar, modal, toast, data table, form, dashboard, landing page, auth flow, checkout, blog, portfolio, e-commerce, SaaS, dark mode toggle, theme switcher, infinite scroll, virtualized list, drag and drop, command palette, breadcrumbs, tabs, accordion, carousel, skeleton loading, error boundary, loading.tsx, error.tsx, not-found.tsx, layout.tsx, page.tsx, .tsx files, .css files, tailwind.config, next.config, postcss.config, tsconfig. If it touches web frontend USE THIS SKILL. Covers components, layout, typography, color, animation, accessibility, i18n, engineering, architecture, state management, data fetching, caching, Next.js routing, RSC, Server Actions, middleware, performance, Core Web Vitals, forms, validation, testing, auth, security, and modern CSS. Enforces requirements-gathering via structured questions before any code generation.
Hedy-Alan/claude-5-step-dev/dev-frontend/SKILL.md
开发流水线第 4 步:前端实现。按 API 契约开发页面、组件和状态管理, API 封装层对齐契约,所有页面覆盖加载/空/错误三态。 触发词:前端实现、写前端、实现页面、开发界面、做 UI。 输入 docs/dev/03-api-contract.md(后端已实现),产出可运行的前端, 下一步交给 /dev-integration。
JIANGEPLUS/senior-developer-codex/.agents/skills/frontend-dev/SKILL.md
Frontend development with premium UI design, animations, and AI-generated media assets. TRIGGER when: building landing pages, marketing sites, product pages with rich animations, generating media assets (image/video/audio/music via MiniMax API), implementing cinematic scroll animations, creating generative art. DO NOT TRIGGER when: simple UI components, basic form pages, minor CSS fixes, adding a button or modal, standard CRUD interfaces, simple responsive adjustments. 触发词:落地页、营销页、动效、滚动动画、AI 配图、生成艺术、前端页面。
JLugagne/agach/.claude/skills/doc-frontend/SKILL.md
Agach frontend: React/TypeScript pages, components, kanban UI, auth context, API client, WebSocket, hooks, modals
JoshBuildApp/launchkit/skills/web-frontend/SKILL.md
Use when writing or reviewing the frontend code of a website — HTML/CSS/JS structure, component architecture, responsive layout, and code quality standards. Triggers: "build the frontend", "code this page/component", "make it responsive", "clean up the frontend code", "what stack should I use", implementing a design in code.
A folder with a SKILL.md file: a name, a description of when to use it, and instructions. Claude loads a skill only when the task matches its description.
Copy the folder into your project's .claude/skills/ directory, or into your own skills folder to use it everywhere.
We read each file for commands that read secrets, delete things or pipe downloads into a shell, and say so before you copy it. No warning is not a promise that a file is safe.
Open a skill to see its discussion. Reports from people and their agents are coming.