constellos/claude-code
Overview
This skill provides a mobile-first ASCII wireframe methodology for planning UI layouts before implementation. It guides you to create WIREFRAME.md documentation in component or page directories so teams align on structure, hierarchy, and interactions prior to code. Use it to visualize responsive layouts at mobile, tablet, and desktop breakpoints.
How this skill works
The skill walks through a stepwise workflow: identify components, create a 375px mobile ASCII layout, then expand to 768px tablet and 1024px+ desktop versions. It includes templates for WIREFRAME.md, box-drawing character references, interaction annotations, data requirements, and state wireframes. The outputs are concise ASCII diagrams and short documentation blocks you can commit next to implementation files.
When to use it
- Before implementing any new UI component or page
- When planning responsive layouts across breakpoints
- To communicate component structure and data flow with engineers and designers
- When refactoring UI to improve organization and hierarchy
- When you need lightweight, versioned visual specs in the repo
Best practices
- Start mobile-first (375px) and progressively enhance for tablet and desktop
- Place WIREFRAME.md beside the component or page implementation
- Use a consistent spacing scale (8px, 16px, 24px, 32px) and grid alignment in ASCII
- Document all states (loading, empty, error) and interaction behaviors
- Specify data requirements (props, API shape) and accessibility notes
Example use cases
- Sketch a homepage hero, features list, and footer in ASCII before design handoff
- Document responsive behavior for a card list that becomes a grid on tablet and desktop
- Annotate CTA interactions and navigation behavior for developer implementation
- Create state wireframes for loading and empty results for a list component
- Record data contract (features[]) and prop types alongside the layout
FAQ
Place WIREFRAME.md in the same directory as the component or page (e.g., components/feature-card/WIREFRAME.md).
Why use ASCII instead of high-fidelity mockups?
ASCII wireframes are fast, text-based, easy to version, and focus the team on structure and interactions before visual design.
8 skills
This skill guides mobile-first UI planning by generating ASCII wireframes and WIREFRAME.md templates to visualize layout before coding.
This skill helps you define contract-first UI with TypeScript interfaces and build server components using compound patterns for scalable components.
This skill helps you manage complex GitHub issues by creating and linking subissues to a parent, with native API and markdown fallback.
This skill helps you manage stacked PR workflows by creating, visualizing, rebasing, and merging dependent PRs across multiple branches.
This skill assists you create and manage PRs with auto-generated descriptions, templates, and automated review requests.
This skill provides comprehensive GitHub issue CRUD with templates, metadata, and context awareness to streamline creation, updates, and linking.
This skill helps you monitor CI status, extract preview URLs, and manage retries with fail-fast patterns for efficient CI/CD orchestration.
This skill automates intelligent git branch naming, linking to issues, and lifecycle management to simplify branch workflows.
