page-scaffold
Generates new page structures and state management (BLoC/Cubit) based on existing data contracts and requirements.
Install
mkdir -p .claude/skills/page-scaffold && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18583" && unzip -o skill.zip -d .claude/skills/page-scaffold && rm skill.zipInstalls to .claude/skills/page-scaffold
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Scaffold a Project Tweety page and state management against an existing contract or use case. Use only for presentation-layer work, not shared widgets.Key capabilities
- →Scaffold a Project Tweety page
- →Scaffold state management for a page
- →Integrate with existing data contracts or use cases
- →Select between BLoC and Cubit controllers
- →Generate page, bloc, event, and state files
- →Add focused tests for initial operations
How it works
This skill scaffolds new pages and their state management for Project Tweety by collecting user requirements and verifying dependencies. It then generates the necessary files based on the chosen controller.
Inputs & outputs
When to use page-scaffold
- →Creating a new feature page for Project Tweety
- →Setting up a BLoC controller for a new UI view
- →Connecting a new page to an existing data contract
- →Structuring presentation files in lib/presentation/pages
About this skill
Page Scaffold
Required inputs
Collect:
feature_namein snake_case;page_intentand initial user-visible behavior;dependency: the exact existing data contract, domain use case, or other lower-layer API;controller: defaultbloc; acceptcubitonly when the user explicitly requests it;- the initial operation and whether a real payload already exists.
Ask only for required information that repository inspection cannot resolve.
Workflow
1. Establish authority and preflight targets
Apply sources in this order: user request, applicable AGENTS.md, tool/templates/feature/presentation/pages/, then the nearest page implementation only for uncovered details. Read root, lib, and page guidance. Use the BLoC template only for the default BLoC path.
List every proposed target. Stop if any target already exists unless the user explicitly requests an update. Keep all new artifacts under lib/presentation/pages/<feature_name>/.
Gate: Confirm complete inputs, the selected controller, an in-scope target list, and zero unapproved overwrites.
2. Verify the dependency
Resolve the named dependency to an existing source file and inspect its callable API. Prefer a data repository contract on the default BFF-backed path; prefer a use case when justified domain already exists. Do not depend on repository implementations or DTOs.
If the dependency is missing, stop without editing and direct the work to $feature-scaffold, $data-scaffold, or $domain-scaffold according to the missing layer.
Gate: Confirm the exact dependency symbol, source path, operation, return type, and DI availability.
3. Select the exact manifest
Use BLoC unless the user explicitly selected Cubit. Create the BLoC manifest:
lib/presentation/pages/<feature_name>/<feature_name>.page.dartlib/presentation/pages/<feature_name>/bloc/<feature_name>.bloc.dartlib/presentation/pages/<feature_name>/bloc/<feature_name>.event.dartlib/presentation/pages/<feature_name>/bloc/<feature_name>.state.dart
For an explicit Cubit request, read the Cubit variant and create only its stated manifest. Do not describe _template as a Cubit template.
Gate: Confirm the planned files match exactly one controller variant and include no lower-layer artifact.
4. Specify and create the page flow
Before production changes, add a focused BLoC/Cubit or widget test for the initial operation, observable states, and first user-visible result. Run it and confirm the expected missing-flow failure.
Mirror the BLoC _template for provider ownership, GetIt.I, Freezed state, feature-scoped status, loading/success/failure handling, and small explicit events. Keep the initial state payload-free unless the existing dependency returns data required by page_intent.
Use app/design-system primitives for visible controls and feedback when available. Keep business policy in the existing dependency or controller orchestration, not the widget tree. Add navigation or localization only when explicitly included in the request and target manifest.
Gate: Confirm the page calls the verified dependency, handles its observable states, renders app-facing values rather than DTOs, and owns no lower-layer behavior.
5. Verify completion
Format changed Dart files. Regenerate only when Freezed, Injectable, or localization inputs changed. Rerun the targeted tests, then analysis and proportionate broader tests.
Gate: Apply the shared scaffold completion gate to the selected presentation manifest.
When not to use it
- →Scaffolding shared widgets
- →Creating lower-layer artifacts
- →When the dependency is missing
Limitations
- →Only for presentation-layer work
- →Not for shared widgets
- →Stops if the dependency is missing
How it compares
This skill enforces a specific architectural pattern for page scaffolding within Project Tweety, ensuring consistency and correct integration with existing contracts, unlike manual page creation.
Compared to similar skills
page-scaffold side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| page-scaffold (this skill) | 0 | 10d | No flags | Intermediate |
| ui-ux-pro-max | 1,909 | 4mo | Review | Intermediate |
| svg-precision | 527 | 3mo | Review | Intermediate |
| mobile-android-design | 101 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
svg-precision
dkyazzentwatwa
Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.
mobile-android-design
wshobson
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
frontend-slides
sickn33
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".