Command
advise
Pre-work command that queries past learnings and leverages MCPs before starting a new task
@danielpodolskyView CommandDevelopment
Command
/theme
Restyle your OwnYourCode dashboard — regenerate dashboard.html's inline <style> from a design brief (v2.5)
Install
$ npx -y skills add DanielPodolsky/ownyourcode --agent claude-codeHow it fires
How this command gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/theme
Context preview
What this command does when you run it.
Restyle your OwnYourCode dashboard — regenerate dashboard.html's inline <style> from a design brief (v2.5)
Command definition
theme.mdname: theme
description: Restyle your OwnYourCode dashboard — regenerate dashboard.html's inline <style> from a design brief (v2.5)
allowed-tools: Read, Write, Edit, Bash, Glob, AskUserQuestion, Skill
/own:theme
> ⚠️ **PLAN MODE WARNING:** Toggle plan mode off before running this command (`shift+tab`). OwnYourCode commands don't work correctly with plan mode.
Restyle your project **dashboard**. The dashboard is self-styled — its CSS lives inline in `dashboard.html`. This command re-cooks that inline `<style>` block (and the Google-Fonts `<link>`) from your design brief, using the `frontend-design` plugin when you have it, otherwise Claude's own design skills.
Overview
1. **View** the current design brief 2. **Change** the brief (free-text design description) → regenerate 3. **Regenerate** from the existing brief (re-roll the look) 4. **Revert** to a previous design via `/own:theme --revert`
Files affected
- `ownyourcode/.theme/theme-prompt.md` — the active design brief (you edit this)
- `ownyourcode/dashboard/dashboard.html` — its `<style>` block + font `<link>` are regenerated
- `ownyourcode/.theme/.history/[ISO-timestamp]/` — backup of the prior
`dashboard.html` + `theme-prompt.md` (created on every write; enables revert)
- `.claude/ownyourcode-manifest.json` — `theme.system`, `theme.last_updated`
Hard constraints
- **Visual only.** Restyle, never restructure. The dashboard's render JS expects
a fixed set of class names and the `window.PROJECT` contract — NEVER rename, remove, or add classes, change the HTML structure, or touch the `<script>` blocks. If a brief asks for layout/behavior/data changes, refuse those parts and warn.
- **Never touch `dashboard-data.js`.** That's project content, not styling.
- **`file://` rules:** CSS stays inline (no external stylesheet `<link>`); web
fonts via `<link>` in `<head>` are fine (the page is always online).
- **Backup-before-write is non-negotiable.** Copy the current `dashboard.html` +
`theme-prompt.md` to `.history/[timestamp]/` BEFORE regenerating.
---
Execution Flow
Phase 0: Argument detection
- `/own:theme --revert` → jump to **Revert Flow** below
- `/own:theme` (no args) → continue to Phase 1
Phase 1: Pre-flight
1. **Verify the dashboard exists:** confirm `ownyourcode/dashboard/dashboard.html` and `ownyourcode/.theme/theme-prompt.md` are present.
ls ownyourcode/dashboard/dashboard.html ownyourcode/.theme/theme-prompt.md
If either is missing, the project isn't initialized on v2.5 — tell the user to run `/own:init` (or re-run the install) and **STOP**.
2. **Read current state:** read `ownyourcode/.theme/theme-prompt.md`.
3. **Detect `frontend-design` via the session skill list** (NOT the filesystem cache — that path goes stale, a v2.4 runtime lesson). Check your own available skills for `frontend-design` (appears as `frontend-design:frontend-design`).
- Present → `plugin_available = true`
- Absent → `plugin_available = false` (Claude will generate directly)
Phase 2: Show current state + action menu
🎨 Current design brief (preview):
[first 8 lines of theme-prompt.md, indented]
...
frontend-design: [✓ available | — not installed (Claude will design directly)]
Then `AskUserQuestion`:
Question: "What do you want to do?"
Options:
1. Change the design brief — describe a new look (free text), then regenerate
2. Regenerate from current brief — re-roll the look, same brief
3. View full brief — read-only display of theme-prompt.md
(Revert is via `/own:theme --revert`.)
Phase 3a: Change the design brief (free text)
Ask in chat (free text, NOT AskUserQuestion):
> "Describe how you want your dashboard to look. Be specific — name a direction, > exact colors, typography, dark/light, motion. Vague briefs ('modern and clean') > produce generic AI-looking output. > > Keep the Technical-constraints section of the brief intact (file:// rules). > > Your brief:"
Then: **Phase 5 (backup)** → write the new brief to `ownyourcode/.theme/theme-prompt.md` → **Phase 6 (regenerate)** → **Phase 7**.
Phase 3b: Regenerate from current brief
No brief change. **Phase 5 (backup)** → **Phase 6 (regenerate)** → **Phase 7**.
Phase 3c: View full brief
Read `ownyourcode/.theme/theme-prompt.md` and display it in full (fenced). No backup, no regeneration. **STOP.**
---
Phase 5: Backup-before-write
BACKUP_TS=$(date -u +"%Y-%m-%dT%H-%M-%SZ")
BACKUP_DIR="ownyourcode/.theme/.history/${BACKUP_TS}"
mkdir -p "$BACKUP_DIR"
cp ownyourcode/dashboard/dashboard.html "$BACKUP_DIR/dashboard.html"
cp ownyourcode/.theme/theme-prompt.md "$BACKUP_DIR/theme-prompt.md"Tell the user: `"📦 Previous dashboard backed up to .theme/.history/${BACKUP_TS}/"`
Phase 6: Regenerate the dashboard's styling
You are regenerating **only** the `<head>` font `<link>` and the `<style>` block of `ownyourcode/dashboard/dashboard.html`. Everything else — the `<body>` markup and both `<script>` blocks (the data load + the render logic) — is UNTOUCHABLE.
**The class contract is the current `<style>` itself.** Read the existing `<style>` block in `dashboard.html` to learn the complete set of selectors the render JS depends on (`.app`, `.hd`, `.sb`, `.nav`, `.tile`, `.bento`, `.kcard`, `.ring`, `.phase-numeral`, `.src`, `.bdg`, `.al-*`, and the v2.6 additions: `.boot`/`.bline`, `.pal`, `.tmx`/`.seg`, `.tnode`/`.track`, `.burn`, `.segbar`, etc.). The regenerated CSS MUST style that exact same selector set — same class names, same structural roles — only the visual treatment changes per the brief.
**Generation:**
- Read the brief: `ownyourcode/.theme/theme-prompt.md`.
- **If `plugin_available`:** apply the `frontend-design` skill's methodology to
drive the design from the brief. (If the Skill can be invoked for guidance, use it; if not, apply its principles directly — either way Claude writes the final CSS. This avoids depending on m
Read more
name: theme description: Restyle your OwnYourCode dashboard — regenerate dashboard.html's inline <style> from a design brief (v2.5) allowed-tools: Read, Write, Edit, Bash, Glob, AskUserQuestion, Skill
/own:theme
> ⚠️ **PLAN MODE WARNING:** Toggle plan mode off before running this command (`shift+tab`). OwnYourCode commands don't work correctly with plan mode.
Restyle your project **dashboard**. The dashboard is self-styled — its CSS lives inline in `dashboard.html`. This command re-cooks that inline `<style>` block (and the Google-Fonts `<link>`) from your design brief, using the `frontend-design` plugin when you have it, otherwise Claude's own design skills.
Overview
1. **View** the current design brief 2. **Change** the brief (free-text design description) → regenerate 3. **Regenerate** from the existing brief (re-roll the look) 4. **Revert** to a previous design via `/own:theme --revert`
Files affected
- `ownyourcode/.theme/theme-prompt.md` — the active design brief (you edit this)
- `ownyourcode/dashboard/dashboard.html` — its `<style>` block + font `<link>` are regenerated
- `ownyourcode/.theme/.history/[ISO-timestamp]/` — backup of the prior
`dashboard.html` + `theme-prompt.md` (created on every write; enables revert)
- `.claude/ownyourcode-manifest.json` — `theme.system`, `theme.last_updated`
Hard constraints
- **Visual only.** Restyle, never restructure. The dashboard's render JS expects
a fixed set of class names and the `window.PROJECT` contract — NEVER rename, remove, or add classes, change the HTML structure, or touch the `<script>` blocks. If a brief asks for layout/behavior/data changes, refuse those parts and warn.
- **Never touch `dashboard-data.js`.** That's project content, not styling.
- **`file://` rules:** CSS stays inline (no external stylesheet `<link>`); web
fonts via `<link>` in `<head>` are fine (the page is always online).
- **Backup-before-write is non-negotiable.** Copy the current `dashboard.html` +
`theme-prompt.md` to `.history/[timestamp]/` BEFORE regenerating.
---
Execution Flow
Phase 0: Argument detection
- `/own:theme --revert` → jump to **Revert Flow** below
- `/own:theme` (no args) → continue to Phase 1
Phase 1: Pre-flight
1. **Verify the dashboard exists:** confirm `ownyourcode/dashboard/dashboard.html` and `ownyourcode/.theme/theme-prompt.md` are present.
ls ownyourcode/dashboard/dashboard.html ownyourcode/.theme/theme-prompt.md
If either is missing, the project isn't initialized on v2.5 — tell the user to run `/own:init` (or re-run the install) and **STOP**.
2. **Read current state:** read `ownyourcode/.theme/theme-prompt.md`.
3. **Detect `frontend-design` via the session skill list** (NOT the filesystem cache — that path goes stale, a v2.4 runtime lesson). Check your own available skills for `frontend-design` (appears as `frontend-design:frontend-design`).
- Present → `plugin_available = true`
- Absent → `plugin_available = false` (Claude will generate directly)
Phase 2: Show current state + action menu
🎨 Current design brief (preview): [first 8 lines of theme-prompt.md, indented] ... frontend-design: [✓ available | — not installed (Claude will design directly)]
Then `AskUserQuestion`:
Question: "What do you want to do?" Options: 1. Change the design brief — describe a new look (free text), then regenerate 2. Regenerate from current brief — re-roll the look, same brief 3. View full brief — read-only display of theme-prompt.md
(Revert is via `/own:theme --revert`.)
Phase 3a: Change the design brief (free text)
Ask in chat (free text, NOT AskUserQuestion):
> "Describe how you want your dashboard to look. Be specific — name a direction, > exact colors, typography, dark/light, motion. Vague briefs ('modern and clean') > produce generic AI-looking output. > > Keep the Technical-constraints section of the brief intact (file:// rules). > > Your brief:"
Then: **Phase 5 (backup)** → write the new brief to `ownyourcode/.theme/theme-prompt.md` → **Phase 6 (regenerate)** → **Phase 7**.
Phase 3b: Regenerate from current brief
No brief change. **Phase 5 (backup)** → **Phase 6 (regenerate)** → **Phase 7**.
Phase 3c: View full brief
Read `ownyourcode/.theme/theme-prompt.md` and display it in full (fenced). No backup, no regeneration. **STOP.**
---
Phase 5: Backup-before-write
BACKUP_TS=$(date -u +"%Y-%m-%dT%H-%M-%SZ")
BACKUP_DIR="ownyourcode/.theme/.history/${BACKUP_TS}"
mkdir -p "$BACKUP_DIR"
cp ownyourcode/dashboard/dashboard.html "$BACKUP_DIR/dashboard.html"
cp ownyourcode/.theme/theme-prompt.md "$BACKUP_DIR/theme-prompt.md"Tell the user: `"📦 Previous dashboard backed up to .theme/.history/${BACKUP_TS}/"`
Phase 6: Regenerate the dashboard's styling
You are regenerating **only** the `<head>` font `<link>` and the `<style>` block of `ownyourcode/dashboard/dashboard.html`. Everything else — the `<body>` markup and both `<script>` blocks (the data load + the render logic) — is UNTOUCHABLE.
**The class contract is the current `<style>` itself.** Read the existing `<style>` block in `dashboard.html` to learn the complete set of selectors the render JS depends on (`.app`, `.hd`, `.sb`, `.nav`, `.tile`, `.bento`, `.kcard`, `.ring`, `.phase-numeral`, `.src`, `.bdg`, `.al-*`, and the v2.6 additions: `.boot`/`.bline`, `.pal`, `.tmx`/`.seg`, `.tnode`/`.track`, `.burn`, `.segbar`, etc.). The regenerated CSS MUST style that exact same selector set — same class names, same structural roles — only the visual treatment changes per the brief.
**Generation:**
- Read the brief: `ownyourcode/.theme/theme-prompt.md`.
- **If `plugin_available`:** apply the `frontend-design` skill's methodology to
drive the design from the brief. (If the Skill can be invoked for guidance, use it; if not, apply its principles directly — either way Claude writes the final CSS. This avoids depending on m
Ships withownyourcode
Claude Code workflow for AI-mentored development. Work efficiently with Spec-Driven Development and the 6 Gates. Built to fight cognitive offloading — for developers using AI to grow and maintain ownership.
Get the whole plugin
Stats
292
Stars
20
Forks
Maintained
Maintenance
Shell
Language
MIT
License
2mo ago
Last commit
8mo ago
Created
Repo: DanielPodolsky/ownyourcode
Other commands on ownyourcode.
@danielpodolskyView CommandCommand
docs
Guide the junior through writing documentation for their project or code
@danielpodolskyView CommandCommand
done
Complete a task with 6 Gates verification, code review, and career value extraction
@danielpodolskyView CommandCommand
Command
Command