Run any Skill in Manus with one click

frontend-design

Stars4

Forks1

UpdatedApril 25, 2026 at 17:21

MUST load BEFORE designing or implementing ANY user-visible UI — components, pages, layouts, flows, dashboards, marketing sites, settings screens, empty/error/loading states, or visual polish. Drives deliberate hierarchy, typography, spacing, color, motion, responsive behavior, and a11y so output isn't generic AI-default slop. Trigger on ANY of: 'build a page', 'design a screen', 'create a component', 'make a UI for', 'dashboard', 'landing page', 'marketing site', 'pricing page', 'sign-up flow', 'login screen', 'settings page', 'admin panel', 'data table', 'empty state', 'error state', 'loading skeleton', '404 page', 'redesign this', 'polish the UI', 'make it look better', 'hero section', 'navbar', 'sidebar', 'modal', 'responsive layout', 'dark mode', or any task whose output is HTML/JSX/TSX a human looks at. Use even when the user just says 'add a page for X'. Does NOT replace shadcn-ui (primitives) or tanstack-start-guide (routing); pair for the visual layer.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

lespaceman

lespaceman/athena-workflow-marketplace

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

File Explorer

3 files

SKILL.md

readonly

name	frontend-design
description	MUST load BEFORE designing or implementing ANY user-visible UI — components, pages, layouts, flows, dashboards, marketing sites, settings screens, empty/error/loading states, or visual polish. Drives deliberate hierarchy, typography, spacing, color, motion, responsive behavior, and a11y so output isn't generic AI-default slop. Trigger on ANY of: 'build a page', 'design a screen', 'create a component', 'make a UI for', 'dashboard', 'landing page', 'marketing site', 'pricing page', 'sign-up flow', 'login screen', 'settings page', 'admin panel', 'data table', 'empty state', 'error state', 'loading skeleton', '404 page', 'redesign this', 'polish the UI', 'make it look better', 'hero section', 'navbar', 'sidebar', 'modal', 'responsive layout', 'dark mode', or any task whose output is HTML/JSX/TSX a human looks at. Use even when the user just says 'add a page for X'. Does NOT replace shadcn-ui (primitives) or tanstack-start-guide (routing); pair for the visual layer.
license	MIT

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

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 an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
Constraints: Technical requirements (framework, performance, accessibility).
Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

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

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

Production-grade and functional
Visually striking and memorable
Cohesive with a clear aesthetic point-of-view
Meticulously refined in every detail

Frontend Aesthetics Guidelines

Focus on:

Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.

IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.

Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

More from this repository

same repository

capture-feature-evidence

lespaceman/athena-workflow-marketplace

Deeply explore a live app feature or a single mapped sub-feature and capture grounded evidence for downstream planning in `docs/qa/exploration-report.md` or a scoped file under `docs/qa/exploration/`. Use after the requested scope is already known, especially after `map-feature-scope` has identified bounded sub-features for a large feature. This skill owns observed product evidence and blockers for the scoped area; it does not perform feature decomposition, frame exploratory charters, prioritize risks, or write coverage plans.

2026-07-014

map-feature-scope

lespaceman/athena-workflow-marketplace

Quickly map a broad product feature into concrete sub-features before deep exploration begins. Use when a requested feature may span multiple routes, tabs, overlays, roles, or primary interactive surfaces and the agent needs to identify bounded exploration units, shared state, and blockers before spawning parallel browser subagents. This skill owns `docs/qa/feature-map.md`; it does not produce the final deep exploration evidence, coverage plan, or test specs.

2026-07-014

exploratory-test-writer

lespaceman/athena-workflow-marketplace

Define an exploratory testing charter: frame what to investigate, why it matters, and which risk hypotheses to test before or alongside the shared testing workflow. Triggers include "exploratory testing for...", "what should I investigate in this app", "help me think about what could go wrong", "risk hypotheses for...", "testing charter for...", "where should I probe deeper", or any request that needs structured thinking about test intent before coverage planning begins. This skill owns exploratory intent, risk framing, investigation order, and concrete follow-up asks for missing evidence; it does NOT own exploration evidence (capture-feature-evidence), final coverage prioritization (plan-test-coverage), or test case specs (generate-test-cases).

2026-07-014

add-playwright-tests

lespaceman/athena-workflow-marketplace

THE DEFAULT ENTRY POINT for the Playwright execution layer in the split testing suite. Use to add, create, or set up Playwright end-to-end tests for a feature, page, or application. It orchestrates the full Playwright workflow after shared exploration and planning: analyze the Playwright codebase, consume `docs/qa/feature-map.md`, `docs/qa/exploration-report.md`, `docs/qa/coverage-plan.md`, and `docs/qa/test-cases/*.md`, write production-grade test code, review it, and verify it with real execution. Delegates to `analyze-test-codebase`, `write-test-code`, `review-test-code`, and `fix-flaky-tests`, while relying on shared `map-feature-scope`, `capture-feature-evidence`, `plan-test-coverage`, `generate-test-cases`, and `review-test-cases`.

2026-07-014

analyze-test-codebase

lespaceman/athena-workflow-marketplace

Scans and reports on an existing Playwright test codebase. This skill should be used to inspect the current Playwright setup before writing, reviewing, or fixing tests, and should be loaded early when working in a new project to understand existing patterns. Covers: Playwright config, page objects, fixtures, helpers, auth/globalSetup patterns, test conventions, and directory structure. Triggers: "understand", "check", "show me", "inspect", or "analyze" the current test setup, config, infrastructure, patterns, or conventions. In the full add-tests workflow, this skill serves as an early read-only analysis sub-step before planning detailed coverage or writing code. This skill examines existing files and outputs a structured report. It does NOT write or fix tests, install Playwright, or explore live websites — for live-site exploration, use `capture-feature-evidence` so evidence is captured in `docs/qa/exploration-report.md`.

2026-07-014

review-test-code

lespaceman/athena-workflow-marketplace

Quality review of Playwright test code before final execution signoff. This skill should be used when implementation review of executable Playwright tests is needed, not for diagnosis of runtime flakiness. Triggers: "review test code", "review Playwright tests", "check test quality", "audit test implementation", "review my tests before merging", "check test code for issues", "review e2e tests", "code review Playwright", "are my tests stable", "check for brittle selectors", "review before running tests". Quality gate after write-test-code — catches brittle selectors, force:true misuse, networkidle overuse, Tailwind utility class selectors, exact numeric assertions, missing teardown, parallel-unsafe mutations, hardcoded data, missing assertions, test coupling, and convention divergence. Review-only — does NOT rewrite tests, does NOT run tests. Use fix-flaky-tests for fixing, write-test-code for rewriting.

2026-07-014

name	frontend-design
description	MUST load BEFORE designing or implementing ANY user-visible UI — components, pages, layouts, flows, dashboards, marketing sites, settings screens, empty/error/loading states, or visual polish. Drives deliberate hierarchy, typography, spacing, color, motion, responsive behavior, and a11y so output isn't generic AI-default slop. Trigger on ANY of: 'build a page', 'design a screen', 'create a component', 'make a UI for', 'dashboard', 'landing page', 'marketing site', 'pricing page', 'sign-up flow', 'login screen', 'settings page', 'admin panel', 'data table', 'empty state', 'error state', 'loading skeleton', '404 page', 'redesign this', 'polish the UI', 'make it look better', 'hero section', 'navbar', 'sidebar', 'modal', 'responsive layout', 'dark mode', or any task whose output is HTML/JSX/TSX a human looks at. Use even when the user just says 'add a page for X'. Does NOT replace shadcn-ui (primitives) or tanstack-start-guide (routing); pair for the visual layer.
license	MIT

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

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 an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
Constraints: Technical requirements (framework, performance, accessibility).
Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

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

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

Production-grade and functional
Visually striking and memorable
Cohesive with a clear aesthetic point-of-view
Meticulously refined in every detail

Frontend Aesthetics Guidelines

Focus on:

Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.