monkilabs/frontend-design
src/orchestrator/skills/frontend-design/SKILL.md
Defines named visual aesthetic, selects typography pairings, builds CSS token systems, adds entrance animations for high-design-quality pages. Use when user asks to design landing page, style marketing site, create distinctive UI theme, pick fonts, or add CSS animations — specifically when visual polish, brand identity matter rather than generic component scaffolding.
$ install --global
skillsauthnpx skillsauth add monkilabs/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 19, 2026, 7:31 AM370.7s3 files scanned
SKILL.md
- name:
- frontend-design
- description:
- Defines named visual aesthetic, selects typography pairings, builds CSS token systems, adds entrance animations for high-design-quality pages. Use when user asks to design landing page, style marketing site, create distinctive UI theme, pick fonts, or add CSS animations — specifically when visual polish, 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 2–3 word direction in code comment at top of main CSS file
- Set foundations — define
:rootCSS custom properties for colors, spacing, radii - Build components — implement layout, cards, heroes, forms using only tokens from step 2
- Add motion — add
@keyframesentrance animations wrapped in 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, extended token sets in COMPONENTS.md.
Design Principles
High-level design principles, full example constraints live in REFERENCE.md. Keep this checklist as short reminder:
- Pick named aesthetic (2–3 words); commit to it.
- Use tokenized colors/spacing; respect WCAG contrast; prefer semantic HTML.
- Respect
prefers-reduced-motion; keep critical animations under 500ms.
Every design must have one unforgettable detail. No two designs should look alike.
Typography Pairings
Recommended typography pairings, extended catalogue in REFERENCE.md. For production, always include metric-preserving fallback chain (e.g., .Fraunces., .Georgia., serif).
Load project-consistency skill for full Foundation Phase pattern, 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
monkilabs/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, 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 Apr 21, 2026
monkilabs/testing-workflow
development
VerifiedTrustedCommunity
Generates test plans, writes unit/integration/E2E test files, identifies coverage gaps, 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 Apr 21, 2026
monkilabs/team-lead-reference
development
VerifiedTrustedCommunity
Provides model routing rules, validates delegation prerequisites, supplies cost tracking templates, defines dead-letter queue formats for Team Lead orchestration. Load when assigning tasks to agents, choosing model tiers, starting delegation session, running multi-agent workflow, delegating work, choosing which model to use, or assigning tasks.
44SKILL.mdUpdated Apr 21, 2026
monkilabs/session-checkpoints
testing
VerifiedTrustedCommunity
Saves, restores session state including task progress, file changes, delegation history. Use when saving progress, resuming interrupted work, picking up where you left off, or checkpointing current work.
44SKILL.mdUpdated Apr 21, 2026