playbooks

home / skills / ladderchaos / tora-skills / frontend-dev

frontend-dev skill

/frontend-dev

This skill helps you craft production-grade frontend interfaces with bold, memorable aesthetics across components, dashboards, and pages.

npx playbooks add skill ladderchaos/tora-skills --skill frontend-dev

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.6 KB
---
name: frontend-dev
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, dashboards, React components, HTML/CSS layouts, or styling any web UI. Generates creative, polished code that avoids generic AI aesthetics.
---

# Frontend Development

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics.

**For technical constraints (animation, typography, accessibility), see `ui-rules` skill.**

## When This Skill Activates

- Building web components or pages
- Creating dashboards or applications
- Styling or beautifying web UI
- React, Vue, HTML/CSS development
- Landing pages or marketing sites

## Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick a direction: brutally minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial
- **Constraints**: Technical requirements (framework, performance, accessibility)
- **Differentiation**: What makes this memorable?

Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality.

## Creative Philosophy

### Typography
Choose fonts that fit the aesthetic. Pair display fonts with body fonts thoughtfully. Consider the project's existing typography system first.

### Color & Theme
Commit to a cohesive aesthetic. Use CSS variables for consistency. Strong primary colors with intentional accents create memorable interfaces.

### Motion
Use animation purposefully - for feedback, transitions, and delight. Focus on high-impact moments over scattered micro-interactions.

### Spatial Composition
Consider unexpected layouts, asymmetry, overlap, grid-breaking elements. Balance negative space with density based on the design direction.

### Visual Texture
Create atmosphere through background treatment, shadows, borders, and layering. Avoid flat, sterile defaults.

## Anti-Patterns

NEVER create generic AI-generated aesthetics:
- Predictable layouts without character
- Cookie-cutter components that could be from any project
- Designs that converge on the same "safe" choices

Interpret creatively. Make unexpected choices. No two interfaces should look the same.

## Implementation

Match implementation complexity to the aesthetic vision:
- Maximalist designs need elaborate detail
- Minimalist designs need restraint and precision

Commit fully to the chosen direction.

Overview

This skill helps you create distinctive, production-grade frontend interfaces with clear design intent and high visual quality. Use it to build components, pages, dashboards, and React or HTML/CSS layouts that avoid generic AI aesthetics and feel intentionally crafted. It emphasizes bold choices, typographic care, purposeful motion, and polished implementation.

How this skill works

The skill guides you through a design-first workflow: define purpose, tone, constraints, and a differentiating direction before writing code. It recommends typography pairings, color systems with CSS variables, purposeful motion patterns, and spatial composition techniques. It also flags anti-patterns and matches implementation complexity to the chosen aesthetic so the final output is coherent and production-ready.

When to use it

  • Building web components, React/Vue components, or complete pages
  • Designing dashboards, admin tools, or data-heavy UIs
  • Styling or refining HTML/CSS layouts for production
  • Creating landing pages or marketing site interfaces
  • When you need a non-generic, memorable aesthetic

Best practices

  • Start by defining purpose, user, and a single clear aesthetic tone
  • Use CSS variables and a limited palette to ensure consistency
  • Pair fonts intentionally: a strong display with a readable body
  • Use motion sparingly for feedback and major transitions only
  • Balance negative space and density; avoid predictable symmetry
  • Match code complexity to the visual direction (restraint for minimalism, detail for maximalism)

Example use cases

  • Designing a bold analytics dashboard with layered cards, intentional shadows, and focused micro-animations
  • Building a minimalist product landing page with refined typography and purposeful white space
  • Creating a retro-futuristic marketing site with custom type, neon accents, and motion for key CTAs
  • Styling a React design system component set that avoids cookie-cutter visuals
  • Polishing a data table UI with clear hierarchy, compact controls, and accessible interactions

FAQ

How do I choose an aesthetic direction?

Start from the product purpose and audience, then pick a tone that supports that goal—minimal for clarity, maximal for personality. Commit and apply rules consistently.

How much animation is appropriate?

Use animation for feedback and major transitions. Avoid scattered micro-motions; focus on a few high-impact moments that enhance comprehension.