skills.rest
NalinDalal
NalinDalalCOMMUNITY
Explore all skills by this author →
Website𝕏@nalin82929GitHub

frontend-craftsmanship

Enforces product-first design standards for building polished frontend interfaces.

1|Updated Aug 17, 2026
Search Tags:#typography#frontend#design system#motion design#interaction states#visual QA#ui quality
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill frontend-craftsmanship-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-craftsmanship
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/frontend-craftsmanship
Command: npx skills add https://github.com/NalinDalal/skillset --skill frontend-craftsmanship-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated frontend work often looks generic and templated, lacking product thinking, real typography hierarchy, designed interaction states, and restrained visual language. This Skill defines a consistent quality bar so every screen ships with Shipd/Linear/Vercel-level polish instead of generic AI slop. ## Core Features & Use Cases - Design Standards Enforcement: Applies rules for typography, spacing tokens, restrained color, motion timing (200ms in / 150ms out, spring curves), and complete component states (hover, loading, empty, error, dark, mobile). - Product-First Workflow: Guides work from problem and user journey through information architecture and design specification before any code is written. - Reverse-Engineering Method: Provides a structured practice for studying premium products (Linear, Vercel, Stripe, Raycast) and rebuilding their experiences with a taste database. - Use Case: When asked to build a developer competition platform, the Skill first produces a design specification covering direction, UX principles, motion, and states, then drives implementation, a senior-designer analysis pass, P0/P1 fixes, and a visual QA pass. ## Quick Start Ask the agent to build or redesign a frontend screen following the frontend-craftsmanship standards, starting with a design specification before writing any code.

Frequently Asked Questions about frontend-craftsmanship

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make AI-generated frontend not look generic?▼

Give the AI a design specification first covering product, user, primary action, design direction, UX principles, motion, and states before any code. Then run an analysis pass, implement only P0/P1 issues, and finish with a visual QA pass.

What component states should every UI component define?▼

Every component must define default, hover, active, focus, disabled, loading, error, empty, success, mobile, and dark states. Missing loading, empty, and error states is one of the most common anti-patterns in AI-built interfaces.

What motion rules should frontend animations follow?▼

Animate only transform and opacity, use 200ms in and 150ms out with spring curves like cubic-bezier(0.16, 1, 0.3, 1), and respect prefers-reduced-motion with instant state changes. One motion per event, and exits must be animated too.

How do I reverse-engineer interfaces like Linear or Vercel?▼

Pick a screen and ask why each element, width, spacing, font, and interaction exists, including empty, hover, and mobile behavior, then rebuild it. Keep a design-research folder with per-product notes on typography, color, motion, and what they avoid.

When should I not use cards in UI design?▼

Use cards only when elevation earns them, and never nest cards inside cards. Whitespace should separate content instead of borders and shadows, and information-rich panels are preferred over decorative cards.

Related Skills

Explore More Design & Creative Skills→
DagimAlemayehuuDagimAlemayehuu

agentic-engineering-experience

Define user journeys, page purpose, and accessibility behavior before visual design.

Community
Intermediate
olaafrossiolaafrossi
10

design-review

Audit live interfaces for visual consistency and patch issues via atomic commits.

Community
Advanced
jairvisassistant-dotjairvisassistant-dot

stitch-design-taste

Creates DESIGN.md files encoding Stitch's premium UI/UX standards for design systems.

Community
Advanced
leonardoacostaleonardoacosta

geist-design

Applies Vercel's Geist design system tokens, typography, and brand rules to UI artifacts.

Community
Intermediate