etylsarin/frontend-design
src/orchestrator/skills/frontend-design/SKILL.md
Defines a named visual aesthetic, selects typography pairings, builds CSS token systems, and adds entrance animations for high-design-quality pages. Use when the user asks to design a landing page, style a marketing site, create a distinctive UI theme, pick fonts, or add CSS animations — specifically when visual polish and brand identity matter rather than generic component scaffolding.
$ install --global
skillsauthnpx skillsauth add etylsarin/opencastle frontend-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 17, 2026, 3:06 AM219.1s3 files scanned
SKILL.md
- name:
- frontend-design
- description:
- Defines a named visual aesthetic, selects typography pairings, builds CSS token systems, and adds entrance animations for high-design-quality pages. Use when the user asks to design a landing page, style a marketing site, create a distinctive UI theme, pick fonts, or add CSS animations — specifically when visual polish and brand identity matter rather than generic component scaffolding.
- license:
- Complete terms in LICENSE.txt
<!-- ⚠️ This file is managed by OpenCastle. Edits will be overwritten on update. Customize in the .opencastle/ directory instead. -->
Design Workflow
- Name the aesthetic — declare a 2–3 word direction in a code comment at the top of the main CSS file
- Set foundations — define
:rootCSS custom properties for colors, spacing, and radii - Build components — implement layout, cards, heroes, forms using only tokens from step 2
- Add motion — add
@keyframesentrance animations wrapped in a reduced-motion guard - Validate — run Quality Checklist below; fix any failing item before marking done
Quick-start example
/* Aesthetic: minimal neon */
:root {
--color-bg: #0a0a0f; --color-surface: #141420;
--color-text: #e8e6e3; --color-accent: #6366f1;
--space-sm: 8px; --space-md: 16px; --space-lg: 32px;
--radius-md: 8px;
--font-heading: 'Fraunces', 'Georgia', serif;
--font-body: 'Inter', system-ui, sans-serif;
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
.hero__title { animation: fade-up 0.4s ease-out both; }
}
Card patterns, hero animations, and extended token sets are in COMPONENTS.md.
Design Principles
High-level design principles and the full set of example constraints live in REFERENCE.md. Keep this checklist as a short reminder:
- Pick a named aesthetic (2–3 words) and commit to it.
- Use tokenized colors/spacing, respect WCAG contrast, and prefer semantic HTML.
- Respect
prefers-reduced-motionand keep critical animations under 500ms.
Every design must have one unforgettable detail. No two designs should look alike.
Typography Pairings
Recommended typography pairings and an extended catalogue are in REFERENCE.md. For production, always include a metric-preserving fallback chain (e.g., 'Fraunces', 'Georgia', serif).
Load the project-consistency skill for the full Foundation Phase pattern and prompt templates.
Quality Checklist (quick)
- Contrast: Text ≥4.5:1 body, ≥3:1 large.
- Tokens: All spacing/colors in
:roottokens; avoid ad-hoc values. - Responsiveness: Layouts break at defined tokens; no overflow at mobile sizes.
- Motion:
prefers-reduced-motionrespected; key animations <500ms. - Accessibility: Keyboard focus states visible; semantic HTML used.
Related Skills
etylsarin/validation-gates
development
VerifiedTrustedCommunity
Defines 10 sequential validation gates: secret scanning, lint/test/build checks, blast radius analysis, dependency auditing, browser testing, cache management, regression checks, and smoke tests. Use when running pre-deploy validation or CI checks, CI/CD pipelines, deployment pipeline validation, pre-merge checks, continuous integration, or pull request validation.
44SKILL.mdUpdated May 17, 2026
etylsarin/testing-workflow
development
VerifiedTrustedCommunity
Generates test plans, writes unit/integration/E2E test files, identifies coverage gaps, and flags common testing anti-patterns. Use when writing tests, creating test suites, planning test strategies, mocking dependencies, measuring code coverage, or test planning.
44SKILL.mdUpdated May 17, 2026
etylsarin/team-lead-reference
development
VerifiedTrustedCommunity
Provides model routing rules, validates delegation prerequisites, supplies cost tracking templates, and defines dead-letter queue formats for Team Lead orchestration. Load when assigning tasks to agents, choosing model tiers, starting a delegation session, running a multi-agent workflow, delegating work, choosing which model to use, or assigning tasks.
44SKILL.mdUpdated May 17, 2026
etylsarin/session-checkpoints
testing
VerifiedTrustedCommunity
Saves and restores session state including task progress, file changes, and delegation history. Use when saving progress, resuming interrupted work, picking up where you left off, or checkpointing current work.
44SKILL.mdUpdated May 17, 2026