メニュー
Envilder website design system: themes, CSS variables, breakpoints, spacing, typography, and component patterns. Use when creating or editing Astro components, adding CSS, or styling website pages. Ensures visual consistency across retro and light themes.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Workflow for investigating and reproducing bugs before fixing via TDD. Use when a bug report or GitHub issue is received. Covers issue fetching, root cause analysis, reproduction planning, and handoff to TDD cycle.
CRAP score quality gate for code complexity and test coverage. Use when reviewing methods for complexity risk, deciding whether to split methods, or determining minimum test coverage requirements.
Code smell detection and safe incremental refactoring patterns. Use when improving code structure, reducing technical debt, or cleaning up after a TDD cycle. Covers SOLID principles, smell catalog, and the propose-apply workflow.
Five independent analysis perspectives for code review: correctness, architecture, security, conventions, and complexity. Use when reviewing PRs, commits, or local changes. Includes severity model and output format.
Index of Architecture Decision Records (ADRs) for cross-cutting technical decisions. Use when making design choices, reviewing proposals for consistency with prior decisions, or onboarding to understand why specific tools or patterns were chosen. Covers test tooling, SDK architecture, code quality, and acceptance test infrastructure.
Git commit messages, PR workflow, and branching strategy using Conventional Commits and Semantic Versioning. Use when creating commits, pull requests, or managing Git workflow.
| name | website-design-system |
| description | Envilder website design system: themes, CSS variables, breakpoints, spacing, typography, and component patterns. Use when creating or editing Astro components, adding CSS, or styling website pages. Ensures visual consistency across retro and light themes. |
Rules and patterns for the Envilder website's pure CSS design system.
The site uses data-theme attribute on <html>. Two themes are supported:
| Theme | Selector | Palette |
|---|---|---|
| Retro (default) | :root | Game Boy green |
| Light | [data-theme="light"] | Warm neutrals |
:root (retro) and
[data-theme="light"] blocks in global.css/* ✓ Correct */
color: var(--color-text);
background: var(--color-bg);
/* ✗ NEVER */
color: #8bac0f;
background: #1a1a2e;
Mobile-first approach. Default styles target mobile; expand with min-width.
| Breakpoint | Target | Pattern |
|---|---|---|
| Default | Mobile | Single column, compact spacing |
min-width: 640px | Tablet | 2-column grids, expanded spacing |
min-width: 1024px | Desktop | 3-4 column grids, full layout |
Use existing grid classes: .grid-2, .grid-3, .grid-4.
Use the spacing scale defined in global.css:
--space-xs through --space-4xl--max-width (1200px)| Use | Font | Access |
|---|---|---|
| Section titles / pixel style | Press Start 2P | Via .pixel-card h3 or custom class |
| Body text | Inter | Default (inherited) |
| Code / terminal | JetBrains Mono | <code>, <pre>, or mono class |
clamp() for fluid typographypx font sizesReuse existing CSS classes for visual consistency:
| Class | Purpose |
|---|---|
.pixel-card | Bordered cards with pixel corner notches |
.pixel-icon | Emoji with pixelated filter |
.pixel-shadow | 4px offset retro shadow |
.badge | Small label badges |
.pixel-divider | Section separator |
.scanlines | CRT overlay effect (use sparingly) |
.section | Standard section wrapper with vertical padding |
| What | Where |
|---|---|
| Global CSS | src/website/src/styles/global.css |
| Components | src/website/src/components/*.astro |
| Layout | src/website/src/layouts/BaseLayout.astro |
global.cssclamp() or relative units<script> tags only