메뉴
Bootstrap the Reality Reprojection design system into a target project — copies CSS bundle, adds font imports, sets polarity
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Run quality checks on a task's implementation before it closes to done. Triggers: 'is this ready?', 'run the review gate', 'check my work', 'I think this is done'. Reviews code + spec adherence, runs tests/build. Design review uses taskmaster:spec-review.
Log a lightweight idea into .taskmaster/ideas/. Triggers: '/add-idea', 'save this as an idea', 'remember this idea', 'log this idea', or something worth keeping, not yet a task. Only way - not backlog_idea_create directly.
Log/update/close project bugs in .taskmaster/bugs/. Triggers: 'log a bug', 'this is a bug', 'track this defect', 'I found a bug', 'shelve this for later', 'list open bugs', 'promote B-XX', 'close B-XX'. Also for ambiguous 'issue' phrasing lacking recurring/systemic/outstanding evidence - falls back here. Only correct way to transition a project Bug.
Scan the codebase for TODO/FIXME/HACK/XXX and cross-reference the backlog. Triggers: 'check todos', 'are my todos tracked', 'scan for todos', 'todo audit', 'what's untracked'.
Write/resolve/drop project decisions in .taskmaster/decisions/. Invoke when about to write an inline option menu - route here, not Options: in chat. Also 'choose between', 'pick an option', 'decide on', 'open question', 'resolve DEC-X', 'drop DEC-X'. Only correct way - do not call backlog_decision_create directly.
Close out a work session. Triggers: 'end session', 'I'm done for today', 'let's wrap up', 'mark this task done', 'save progress'. ONLY correct way to mark tasks done/in-review with a session record.
| name | setup |
| description | Bootstrap the Reality Reprojection design system into a target project — copies CSS bundle, adds font imports, sets polarity |
| argument-hint | ["project directory or 'current project'"] |
You bootstrap the Reality Reprojection design system into a target web project. This copies the CSS bundle, adds required font imports, and configures the HTML entry point.
From $ARGUMENTS, determine the target project directory.
Use Glob to find the project's HTML entry point(s) (e.g., index.html, *.html) and any existing CSS directory structure.
The bundled design system is a single CSS file containing all 36 modules in cascade order.
Source: ${CLAUDE_PLUGIN_ROOT}/bundle/reality-reprojection.css
Read the bundle file, then write it to the target project. Choose the destination based on project structure:
| Project Has | Write To |
|---|---|
css/ or styles/ directory | css/reality-reprojection.css or styles/reality-reprojection.css |
public/ directory | public/css/reality-reprojection.css |
src/assets/ directory | src/assets/css/reality-reprojection.css |
static/ directory | static/css/reality-reprojection.css |
| No clear structure | css/reality-reprojection.css (create the directory) |
Tell the user where you placed the file.
The design system requires three Google Fonts. Add this to the <head> of the HTML entry point(s):
<!-- Reality Reprojection — Required Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@800&family=DM+Sans:ital,wght@0,400;0,600;0,700&family=JetBrains+Mono:wght@600&display=swap" rel="stylesheet">
If the project uses a build tool or framework, suggest the appropriate method instead:
| Framework | Method |
|---|---|
| React/Next.js | Add <link> tags to public/index.html, _document.tsx, or app/layout.tsx |
| Vue/Nuxt | Add to index.html or nuxt.config head section |
| Svelte/SvelteKit | Add to app.html |
| Astro | Add to Layout.astro or similar base layout |
| Plain HTML | Add directly to <head> |
Add the stylesheet link after the font imports:
<!-- Reality Reprojection Design System -->
<link rel="stylesheet" href="[path-to-reality-reprojection.css]">
Use the correct relative path based on where you placed the file in Step 2.
Add data-polarity to the <html> element:
<html data-polarity="dark">
Default to dark. If the user's project already has a light theme or preference, use light instead.
Present a summary:
## Reality Reprojection — Setup Complete
**CSS Bundle:** `[destination path]` (single file, all 36 modules)
**Fonts:** Added Syne 800, DM Sans 400/600/700, JetBrains Mono 600
**Stylesheet:** Linked in `[html file]`
**Polarity:** `dark` (set on `<html>`)
### Quick Start
Use system classes directly in your HTML:
```html
<h1 class="declaration declaration--h2">HEADING</h1>
<p class="narrator">Body text here.</p>
<button class="btn btn--primary">ACTION</button>
<span class="badge badge--signature">Label</span>
/reality-reprojection:generate — Create new components/reality-reprojection:convert — Convert existing code to use system tokens/reality-reprojection:review — Audit code for compliance
## Rules
- ALWAYS show the user what you're about to write/modify before doing it
- If the project already has a `reality-reprojection.css`, ask before overwriting
- Do NOT modify existing stylesheets — only add the system CSS alongside them
- Respect the project's existing directory conventions