Claude skills and agent skills

happycapy-aiSkill

frontend-slides

happycapy-ai/Happycapy-skills/skills/frontend-slides/SKILL.md

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

Often used witheverything-claude-code·everything-claude-code-conventions·nextjs-turbopack

DongDuong2001Skill

frontend-code

DongDuong2001/pudo-code-system/skills/code/frontend/SKILL.md

Frontend architecture, UI/UX implementation, and web performance

lza6Skill

frontend-ui-ux

lza6/claw-code-tingfeng/skills/frontend-ui-ux/SKILL.md

Designer-developer for UI/UX work

xenitV1Skill

frontend-design

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-campaign·ecosystem-reference·brief-to-tasks

pwndocSkill

test-frontend-e2e

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-AlanSkill

frontend-design

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-campaign·ecosystem-reference·brief-to-tasks

ceilf6Skill

frontend-design

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-campaign·ecosystem-reference·brief-to-tasks

avibebuilderSkill

frontend-design

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-campaign·ecosystem-reference·brief-to-tasks

itseffiSkill

frontend-design

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-campaign·ecosystem-reference·brief-to-tasks

butterbase-aiReads credentialsSkill

journey-frontend

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-aiSkill

frontend-brand

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-ORGReads credentialsSkill

coai-frontend

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.

GladiarnReads credentialsSkill

glad-frontend

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.

Zenobia000Skill

frontend-spec

Zenobia000/agent-skills-starter/.claude/skills/frontend-spec/SKILL.md

為有 UI 的規格產出前端規格書與 Pencil 設計稿：路由表、每頁 design brief、四態畫面（Loading/Empty/Error/Success）的 .pen mockup。在 /to-spec 之後、/to-tickets 之前跑，可選。

PaulRBergSkill

frontend-design

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-campaign·ecosystem-reference·brief-to-tasks

alessiogarifo92Skill

vue-frontend

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

AlpayCSkill

tdd-frontend

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-lzReads credentialsSkill

web-frontend

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-AlanSkill

dev-frontend

Hedy-Alan/claude-5-step-dev/dev-frontend/SKILL.md

开发流水线第 4 步：前端实现。按 API 契约开发页面、组件和状态管理， API 封装层对齐契约，所有页面覆盖加载/空/错误三态。 触发词：前端实现、写前端、实现页面、开发界面、做 UI。 输入 docs/dev/03-api-contract.md（后端已实现），产出可运行的前端， 下一步交给 /dev-integration。

JIANGEPLUSReads credentialsSkill

frontend-dev

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 配图、生成艺术、前端页面。