frontend-design-before-coding-design-direction
Sub-skill of frontend-design: Before Coding: Design Direction.
Best use case
frontend-design-before-coding-design-direction is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Sub-skill of frontend-design: Before Coding: Design Direction.
Teams using frontend-design-before-coding-design-direction should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/before-coding-design-direction/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How frontend-design-before-coding-design-direction Compares
| Feature / Agent | frontend-design-before-coding-design-direction | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Sub-skill of frontend-design: Before Coding: Design Direction.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Before Coding: Design Direction ## Before Coding: Design Direction Establish a bold aesthetic direction by considering: 1. **Purpose**: What is this interface trying to accomplish? 2. **Tone**: Professional? Playful? Minimalist? Bold? 3. **Constraints**: Technical requirements, brand guidelines, accessibility? 4. **Differentiation**: How will this stand out? **Key Principle**: Choose a clear conceptual direction and execute it with precision.
Related Skills
verify-Codex-run-commit-vs-working-tree-before-closing
After a Codex implementation run, verify the claimed file set against the actual commit and working tree before treating the issue as fully complete.
itinerary-design
Use when constructing a day-by-day itinerary inside a trip plan. Encodes base-count rules, jet-lag handling, transit-day discipline, slack budgeting, and the "last day = travel only" rule. Invoked by the trip-planner skill.
mooring-design
Design and analyze mooring systems including CALM and SALM buoys, catenary moorings, and spread mooring configurations. Covers mooring line design, safety factors, environmental loading, and compliance with DNV, API, and ABS standards.
touchdesigner-mcp
Control a running TouchDesigner instance via twozero MCP — create operators, set parameters, wire connections, execute Python, build real-time visuals. 36 native tools.
popular-web-designs
54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components, layout rules, and ready-to-use CSS values.
design-md
Author/validate/export Google's DESIGN.md token spec files.
Codex-design
Design one-off HTML artifacts (landing, deck, prototype).
frontend-design
Create distinctive, production-grade web interfaces with high design quality. Use for components, pages, dashboards, and full applications that need to stand out from generic AI aesthetics.
canvas-design
Create original visual art in PNG and PDF formats using design philosophy principles. Express aesthetic movements visually with minimal text. Use for creating museum-quality visual artifacts, design manifestos, and artistic compositions.
git-sync-manager-1-always-check-before-operating
Sub-skill of git-sync-manager: 1. Always Check Before Operating (+4).
clean-code-step-1-api-compatibility-check-mandatory-before-wr
Sub-skill of clean-code: Step 1: API Compatibility Check (MANDATORY before writing shims) (+2).
scientific-problem-selection-key-design-principles
Sub-skill of scientific-problem-selection: Key Design Principles.