skills.rest
PerceptLabs
PerceptLabsCOMMUNITY
Explore all skills by this author →
GitHub

planning

Define application architecture and UI structure using JSX-based planning language.

Updated Jan 17, 2026
Search Tags:#planning#architecture#validation#design system#jsx#app structure
One-click install
npx skills add https://github.com/PerceptLabs/wiggum --skill planning-perceptlabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: planning
Source: https://github.com/PerceptLabs/wiggum/tree/main/apps/ide/src/skills/planning
Command: npx skills add https://github.com/PerceptLabs/wiggum --skill planning-perceptlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a structured, validated way to define an application's architecture and design system using a JSX-based language before writing any implementation code.

Core Features & Use Cases

  • Declarative Architecture: Define app structure, screens, navigation, and data models using a clear, hierarchical JSX syntax.
  • Design System Integration: Specify themes, typography, animations, and design rules for consistent UI.
  • Validated Plans: The harness automatically validates the plan against predefined constraints, catching errors early.
  • Use Case: Kickstart a new project by defining the entire app's layout, components, and data schema in a single plan.tsx file, ensuring alignment before development begins.

Quick Start

Use the planning skill to create a new app structure by writing a plan.tsx file.

Frequently Asked Questions about planning

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I define app architecture and UI structure using JSX before writing implementation code?▼

You define app architecture and UI structure using a JSX-based planning language in a plan.tsx file. This declarative approach lets you specify component hierarchies, screen layouts, navigation flows, and data schemas before development begins.

What is declarative architecture planning and how does it validate design constraints?▼

Declarative architecture planning is a method to define your app structure, navigation, and data models hierarchically using JSX. The harness automatically validates the plan against predefined constraints, catching design system errors and component misuse early.

Can I specify design system rules like themes and typography in an app architecture plan?▼

Yes, you can specify design system rules including themes, typography, and animations directly within the architecture plan. This ensures consistent UI rules are defined and validated alongside component hierarchies and screen layouts.

What's the best way to structure a new application's layout, components, and data schema in a single file?▼

The best way to structure a new application's layout, components, and data schema in a single file is using a JSX-based plan.tsx file. This approach defines the entire app architecture hierarchically, ensuring team alignment before implementation.

How do validated plans catch errors in component usage and design constraints during app planning?▼

Validated plans catch errors by automatically checking your JSX-based architecture definitions against predefined rules. The harness validates design constraints and component usage, identifying structural and design system inconsistencies early in the planning phase.

Related Skills

Explore More Software Engineering Skills→
lucasilverentandlucasilverentand
3

hono-jsx

Render server-side HTML with Hono's built-in JSX integration.

Community
Intermediate
Globaly-IncGlobaly-Inc

gh-architecture-docs

Generate technical specs, implementation plans, and SQL migration skeletons for Supabase applications.

Official
Advanced
RaNDoM6913RaNDoM6913
1

design-system-reviewer

Analyze frontend components for design system token compliance and hardcoded values.

Community
Advanced
partme-aipartme-ai
610

docker-compose

Define and manage multi-container Docker applications with Docker Compose.

Official
Intermediate