菜单
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