Frontend

Always read anytime you're making any UI the user will see, whether that's a one-off HTML file or a tool they're building. Any visual artifact at all.

5 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add adamholter/frontend-skill --skill frontend

Manual install

git clone --depth 1 https://github.com/adamholter/frontend-skill.git /tmp/frontend-skill
mkdir -p ~/.claude/skills
cp -r /tmp/frontend-skill/. ~/.claude/skills/frontend

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Frontend

Read the brief, audience, brand, app, dependencies, assets, and user workflow before designing. Let the product decide the visual language. Avoid a default house style.

## Workflow

Choose the direction yourself and keep going without waiting for the user's approval. For a quick one-off, build one version. When the choice is something the user will care about, make distinct alternatives and show them together. Use UI reference images (generated or from the web) when they help.

## Build

Reuse existing components, icons, state, and dependencies. Check dependencies before importing. Use official packages for named design systems.

Build reachable loading, empty, error, focus, hover, active, disabled, and success states. Use stable grids, aspect ratios, min/max constraints, reserved asset space, and mobile-safe viewport units. Design mobile deliberately.

## Design

Choose readable type, clear hierarchy, consistent tokens, and deliberate spacing. Cards, centered layouts, bold color, and motion are valid when they serve the product. Avoid generic cards, decorative labels, fake product previews, and repeated filler sections. Match the interaction model to the product; don't substitute a static mockup for requested behavior.

## Assets

Reproduce selected references closely. Use images for static artwork or computational inputs such as masks and texture maps. Use assets where the content calls for them; don't fake imagery with decorative CSS.

Read the full skill on GitHub

Details

Skill name: frontend
Repository: adamholter/frontend-skill
License: MIT
Repo updated: 16 September 2026

FAQ

What does the Frontend skill do?

Always read anytime you're making any UI the user will see, whether that's a one-off HTML file or a tool they're building. Any visual artifact at all.

How do I install the Frontend skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add adamholter/frontend-skill --skill frontend. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Frontend popular?

It lives in adamholter/frontend-skill, which has 5 GitHub stars and 1 forks.

Related skills

Mente Designer

eulucasduty/mente-designer

DNA de design de 20 sites premium (engenharia reversa via DevTools) — a fórmula Webflow/HTML + Lenis + GSAP/ScrollTrigger destilada em leis, calibres medidos e 22 efeitos nomeados com código. Use ao criar landing pages animadas, sites com scrollytelling, heroes tipográficos, vídeo-fundo, marquees, pin/scrub ou qualquer página que precise de "feel" de agência de elite.

Frontend & Design

Art Director

NewenergyEric/art-director-skill

Help art directors turn references, taste and samples into a shareable project pack, then guide teammates and agents to create, review and deliver consistent components. Use for art-direction setup, visual systems, multi-category production and revisions in games, UI and campaigns.

Frontend & Design

Sprite Forge

isabellagreco1997/sprite-forge

Turn any pixel-art image (real or AI-generated) into clean game sprites, new poses and animations (idle, walk) that keep the character consistent. Use when asked to extract a character from a screenshot, make a sprite, re-pose a sprite, animate a pixel character, build a walk/idle cycle, or put an animated sprite back into its scene.

Frontend & Design

Screenshot to Design System

WCF900905/screenshot-to-design-system

Extracts color tokens and component styles from UI screenshots by reading each control region individually (not full-page layout). Generates a complete design system demo with tokens.css and components.html. Ignores backgrounds and icons. Use when the user uploads a UI screenshot, asks for design tokens, color palette extraction, or component library generation from a reference image.

Frontend & Design

Toutour

matt-ye/Toutour

Add a spotlight onboarding tour to any website. Analyzes the site's layout, tabs and UI components, interviews the developer (step granularity, mask, languages, theming, trigger mode, library), then generates and Playwright-verifies a guided tour. Use when the user asks for an onboarding tour, product tour, guided walkthrough, coach marks, feature introduction overlay, or says users can't figure out their site.

Frontend & Design

Salgadoia Web Design Engineer Pro

Luispitik/salgadoia-web-design-engineer-pro

Skill end-to-end para construir webs y landings profesionales con Next.js 16, React 19, Tailwind CSS v4, shadcn/ui y Framer Motion. Pensada para que un usuario sin conocimientos técnicos pueda PREVISUALIZAR estilos en su navegador antes de elegir, y completar la página de principio a fin (intake, brief, diseño, build, QA, deploy). Combina 8 direcciones visuales narrativas (Editorial Serif, Swiss Minimal, Luxury Dark Warm, Corporate Bold, Understated Elegance, Neo-Brutalist, Playful Gradient, Retro Terminal) con 10 paletas y 10 emparejamientos tipográficos en un sistema mix-and-match con build-

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.