Frontend Design

Frontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI.

Security Scan

This is an instruction-only frontend design guidance pack (React/Next/Tailwind) that does not request credentials, install code, or perform hidden network exfiltration — its files are coherent with the stated purpose.

Purpose & Capability

Name/description match the content: files provide frontend design rules, stack recommendations, code snippets, and examples. Nothing in the manifest or files asks for unrelated permissions or capabilities.

Instruction Scope

SKILL.md and supporting files are read-only guidance and do not instruct the agent to read user files, access secrets, or call external endpoints. They do include example developer commands (e.g., npx shadcn@latest init) and references like 'clawhub sync' which, if executed by a user/agent, would fetch packages or contact services — but those are developer actions expected for implementing the recommended stack, not hidden or contradictory instructions.

Install Mechanism

No install spec and no code files — instruction-only. No downloads, archives, or external install URLs are present.

Credentials

The skill declares no required environment variables, credentials, or config paths. The content does not request secrets or unrelated tokens.

Persistence & Privilege

always is false and the skill does not request persistent system presence or modify other skills. Autonomous invocation is allowed by platform default but the skill itself does not demand elevated privileges.

Assessment

This skill appears coherent and safe as read-only design guidance. Things to consider before installing or acting on it: (1) The skill's files include developer commands (e.g., npx shadcn..., clawhub sync) — running those on your machine will fetch packages and contact external registries, so review any commands before executing them. (2) Some font recommendations may have licensing restrictions — verify font licenses before use. (3) Although the skill claims it 'never makes network requests,' that only refers to the guidance itself; following the implementation instructions locally will involve network activity to install dependencies. If you plan to let an agent run commands autonomously, restrict that agent's permissions and review any commands first.

When to Use

User needs web UI built. Agent handles landing pages, dashboards, forms, component libraries, and any frontend requiring production polish.

Quick Reference

Topic	File
Stack & tooling	stack.md
Typography rules	typography.md
Color systems	colors.md
Mobile patterns	mobile.md
Animation	animation.md
Examples	examples.md

Core Rules

1. Mobile-First Always

• Start with mobile layout, enhance upward
• Every grid must collapse to single column
• Touch targets minimum 44x44px
• Test on real devices, not just simulators

2. Typography Matters

• Avoid generic fonts (Inter, Roboto, Arial)
• Use dramatic size jumps (2x+), not timid increments
• Body text 16-18px minimum
• See typography.md for specific recommendations

3. Color with Purpose

• 70-20-10 rule: primary, secondary, accent
• Commit to light OR dark — no muddy mid-grays
• Never solid white backgrounds — add depth
• See colors.md for CSS variables and patterns

4. Feedback on Every Interaction

• Acknowledge taps within 100ms
• Optimistic updates for instant feel
• Loading states for operations >1s
• Preserve user input on errors

5. Accessibility Non-Negotiable

• Color contrast 4.5:1 (text), 3:1 (UI)
• Focus states on all interactive elements
• Semantic HTML (nav, main, section, article)
• Keyboard navigation works for everything

6. Performance from Start

• Lazy load below-fold content
• Image placeholders prevent layout shift
• Code split heavy components
• Target LCP <2.5s, CLS <0.1

7. One Memorable Element

• Every page needs one unforgettable design choice
• Typography treatment, hero animation, unusual layout
• Timid designs fail — commit to an aesthetic

Frontend Traps

Trap	Consequence	Fix
Generic fonts	Looks like every other site	Use distinctive fonts
Solid white backgrounds	Flat, lifeless	Add gradients, grain, depth
Mobile as afterthought	Broken for 60% of users	Mobile-first always
Form error clears input	User rage	Preserve input, highlight error
No loading states	User thinks broken	Show progress immediately
Timid type scale	No visual hierarchy	Use 2x+ jumps for headlines

Scope

This skill ONLY:

• Provides frontend patterns and guidelines
• Recommends stack and tooling choices
• Guides responsive implementation

This skill NEVER:

• Makes network requests
• Accesses user data
• Stores any information

Security & Privacy

This skill is read-only guidance. No data is collected, sent, or stored.

Feedback

• If useful: clawhub star frontend
• Stay updated: clawhub sync