frontend-design-implementation-philosophy
Sub-skill of frontend-design: Implementation Philosophy.
Best use case
frontend-design-implementation-philosophy is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Sub-skill of frontend-design: Implementation Philosophy.
Teams using frontend-design-implementation-philosophy 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/implementation-philosophy/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How frontend-design-implementation-philosophy Compares
| Feature / Agent | frontend-design-implementation-philosophy | 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: Implementation Philosophy.
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
# Implementation Philosophy
## Implementation Philosophy
**Match complexity to vision:**
**Maximalist Design:**
```css
/* Elaborate, intentional complexity */
.hero {
background:
linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.8)),
url('texture.png'),
radial-gradient(ellipse at 20% 50%, #e94560 0%, transparent 50%);
backdrop-filter: blur(10px);
}
```
**Minimalist Design:**
```css
/* Restraint and precision */
.hero {
background: #fafafa;
padding: 8rem 2rem;
}
.hero h1 {
font-weight: 300;
letter-spacing: -0.02em;
line-height: 1.1;
}
```Related Skills
read-only-pre-implementation-audit
Systematic cross-check workflow to validate assumptions before TDD coding begins
portable-baseline-pattern-implementation
Implement portable configuration baselines by separating machine-agnostic settings from machine-specific hooks and plugins
plan-gated-issue-implementation
Workflow for executing pre-approved GitHub issues with mandatory validation checkpoints
live-state-aware-overnight-implementation-prompts
Design overnight implementation prompts that begin with a live repo/CI precheck so workers continue from partial progress instead of replaying stale handoffs.
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.