Use this skill when the user wants to turn an application, product, startup idea, SaaS, mobile app, web app, API, AI product, or internal tool into a production-ready Markdown specification package for coding agents. Creates PRD/product spec, UX flows, design system brief, technical architecture, ADRs, AI/safety/privacy specs, API/data model, client/backend implementation specs, QA acceptance tests, release readiness, and executable task checklists. Do not use for simple one-off coding tasks unless the user asks for a complete spec, PRD, ADR, project plan for coding agents, or build package.
npx skills add https://github.com/instructa/agent-skills --skill app-spec-packager
Create complete, production-ready specification packages that coding agents can use to build applications without needing timelines, storypoints, budgets, or sprint planning.
Create a Markdown package folder and, when artifact/file output is available, also create a zip. Use this default structure unless the user asks otherwise:
[app-slug]-spec/
README.md
PRODUCT_SPEC.md
UX_FLOWS.md
DESIGN_SYSTEM_SPEC.md
TECH_ARCHITECTURE.md
ADRS.md
AI_SPEC.md # only if AI/automation/model behavior is relevant
SAFETY_PRIVACY_SECURITY.md
API_AND_DATA_MODEL.md
CLIENT_IMPLEMENTATION_SPEC.md
BACKEND_IMPLEMENTATION_SPEC.md # only if backend/API/server work is relevant
SUBSCRIPTION_BILLING_SPEC.md # only if monetization/payments are relevant
ANALYTICS_OBSERVABILITY_SPEC.md
QA_ACCEPTANCE_TESTS.md
RELEASE_READINESS.md
TASKS.md
REFERENCES.md # include only when research or external facts were used
Use scripts/create_spec_package.py to scaffold the package when helpful, then fill every file with application-specific content.
REFERENCES.md.references/validation-checklist.md before final output.Read these files as needed:
references/document-blueprints.md: full section templates for each generated document.references/platform-modules.md: platform-specific concerns for iOS, Android, web, backend, AI, payments, B2B, and regulated products.references/safety-privacy.md: mandatory when the app has accounts, AI, payments, minors, health, mental health, financial/legal advice, location, biometrics, UGC, sensitive data, or safety risk.references/task-taxonomy.md: mandatory before writing TASKS.md.references/validation-checklist.md: mandatory before finalizing.PRODUCT_SPEC.md and repeat critical ones in TASKS.md as "Do not do" constraints.Use stable IDs:
REQ-PROD-001
REQ-UX-001
REQ-ARCH-001
REQ-AI-001
REQ-SEC-001
REQ-API-001
REQ-IOS-001
REQ-WEB-001
REQ-BE-001
REQ-QA-001
Every major requirement should answer:
What must happen?
When does it happen?
Who or what triggers it?
Where is state stored?
What are the edge cases?
How is it tested?
What must never happen?
Use the task template from references/task-taxonomy.md. A good task includes:
Task ID
Title
Goal
Context
Requirements
Files or areas likely involved
Acceptance criteria
Tests
Dependencies
Do not do
Make tasks implementable by coding agents with minimal back-and-forth. Prefer small, verifiable tasks over broad epics.
Use these defaults unless user context contradicts them:
Return links to the generated folder or zip. Briefly state what was created and call out any assumptions or items that require legal/platform/security review.
Rigorous visual validation expert specializing in UI testing, design system compliance, and accessibility verification. Masters screenshot analysis, visual regression testing, and component validation. Use PROACTIVELY to verify UI modifications have achieved their intended goals through comprehensive visual analysis.
Use when you need a deterministic inspection of a WordPress repository (plugin/theme/block theme/WP core/Gutenberg/full site) including tooling/tests/version hints, and a structured JSON report to guide workflows and guardrails.
Implement accessible user interfaces with semantic HTML, keyboard navigation, sufficient color contrast, screen reader support, ARIA attributes, and proper focus management. Use this skill when creating or editing React components (.tsx, .jsx files), when implementing forms with labels and inputs, when building interactive elements (buttons, modals, menus, dialogs), when implementing keyboard navigation, when choosing colors and ensuring contrast ratios, when adding ARIA attributes, when testing with screen readers, when implementing focus states and focus management, or when creating heading structures and page landmarks.
Build mobile-first responsive layouts with fluid containers, relative units, standard breakpoints, and touch-friendly design that adapts seamlessly across devices. Use this skill when creating or modifying layouts, implementing media queries, defining breakpoints, choosing sizing units, optimizing for mobile devices, or testing UI across screen sizes. Apply when working with responsive design, mobile layouts, tablet views, desktop views, viewport configuration, or any styling that needs to adapt to different screen sizes and device capabilities.
MUST USE after building/changing any UI or when asked whether a page, component, or TUI looks right. Rigorous visual QA across web/page and terminal UIs. Prefer browser:control-in-app-browser for unauthenticated browser/page QA in Codex, then Playwright/agent-browser/dev-browser. Captures screenshot/TUI evidence with bundled diff scripts, runs design-system/functional and visual-fidelity/CJK reviewer passes, then synthesizes a good/bad verdict. Triggers: visual QA, screenshot/pixel diff, UI looks wrong, reference fidelity, design system check, responsive check, CJK text clipping, TUI alignment, box-drawing drift.
Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing.
Use when you need a deterministic inspection of a WordPress repository (plugin/theme/block theme/WP core/Gutenberg/full site) including tooling/tests/version hints, and a structured JSON report to guide workflows and guardrails.
29 production-ready scripts for iOS app testing, building, and automation. Provides semantic UI navigation, build automation, accessibility testing, and simulator lifecycle management. Optimized for AI agents with minimal token output.
Take instructa/app-spec-packager from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.