원클릭으로
speckit-wireframe-prep
Load spec context and validation rules before generating wireframes
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Load spec context and validation rules before generating wireframes
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Generate SVG wireframes from spec.md with light/dark/both themes
Cross-SVG consistency check for features with multiple wireframes
Review wireframes, classify issues as PATCH or REGENERATE, sign off approved wireframes into spec.md
Capture standardized screenshots of wireframes (requires Python or Docker)
Launch the interactive wireframe viewer in a browser
| name | speckit-wireframe-prep |
| description | Load spec context and validation rules before generating wireframes |
| compatibility | Requires spec-kit project structure with .specify/ directory |
| metadata | {"author":"github-spec-kit","source":"wireframe:commands/prep.md"} |
RescueDogs note: feature paths are
features/<category>/<NNN-name>/, notspecs/<feature>/. Validator is at.specify/extensions/wireframe/scripts/validate.py(shipped by this project).
Prime context for wireframe work. Run before /speckit.wireframe.generate when you want to pre-load spec context, validation rules, and any prior review issues.
$ARGUMENTS
Accepts:
001-user-auth or 001) — prep for specific featureIf an argument is provided, resolve it to the full feature directory:
# Accept "001" or "001-user-auth" or "user-auth"
FEATURE_DIR="specs/$(ls specs/ | grep -E "^${ARG}" | head -1)"
If no argument, set FEATURE_DIR="" (patch mode).
Read these files and summarize nothing — the AI loads them silently for reasoning, then produces the priming block in Step 5.
.specify/extensions/wireframe/scripts/validate.py — understand every check.specify/extensions/wireframe/GENERAL_ISSUES.md — avoid recurring mistakes.specify/extensions/wireframe/wireframe-config.yml — theme defaults, output pathsIf any of these files don't exist, continue without them — they're conveniences, not requirements.
If FEATURE_DIR is set:
Read <FEATURE_DIR>/spec.md and extract:
### User Story N section)## UI Mockup block (prior sign-off)If <FEATURE_DIR>/wireframes/ exists, list existing SVGs and their .issues.md files.
If FEATURE_DIR is empty (patch mode):
Find all .issues.md files under specs/*/wireframes/ and load them. These describe patches needed across features.
Scan loaded issues for patterns that recur across multiple features. If a pattern appears in ≥3 features' issues files, flag it as an escalation candidate — it should probably be documented in .specify/extensions/wireframe/GENERAL_ISSUES.md to prevent repetition.
Output escalation candidates (if any):
═══════════════════════════════════════════
ESCALATION CANDIDATES
═══════════════════════════════════════════
Pattern: "Touch targets below 44px on mobile footer"
Seen in: 001, 003, 005 (3 features)
Suggest: Add to GENERAL_ISSUES.md
Pattern: "Badge overflow on annotation panel"
Seen in: 002, 004 (2 features, 1 more and it should escalate)
═══════════════════════════════════════════
═══════════════════════════════════════════════════════════════
WIREFRAME PREP COMPLETE
═══════════════════════════════════════════════════════════════
MODE: [feature | patch]
FEATURE: [NNN-feature-name | n/a]
NON-NEGOTIABLES:
- Canvas 1920×1080, no deviation
- Light theme panels #e8d4b8 (never #ffffff)
- Minimum font 14px, touch targets 44px
- FR/SC badges only in annotation panel
- Each annotation group anchored by a User Story
CRITICAL VALIDATOR RULES (if validator loaded):
[list of top 5 rules by frequency from GENERAL_ISSUES.md]
FEATURE STATE:
Existing SVGs: [count]
Issues files: [count]
Signed off: [yes/no — yes if spec.md has `## UI Mockup` block]
PRIOR ISSUES (if any):
[count] PATCHABLE
[count] REGENERATE
NEXT STEPS:
Generate: /speckit.wireframe.generate [feature]
Review: /speckit.wireframe.review [feature]
═══════════════════════════════════════════════════════════════