PA

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.zip

Installs 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.
151 charsno explicit “when” trigger
Intermediate

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

You give it
Feature name, page intent, dependency, controller choice, initial operation
You get back
New page and state management files under `lib/presentation/pages/`

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_name in snake_case;
  • page_intent and initial user-visible behavior;
  • dependency: the exact existing data contract, domain use case, or other lower-layer API;
  • controller: default bloc; accept cubit only 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.dart
  • lib/presentation/pages/<feature_name>/bloc/<feature_name>.bloc.dart
  • lib/presentation/pages/<feature_name>/bloc/<feature_name>.event.dart
  • lib/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.

SkillInstallsUpdatedSafetyDifficulty
page-scaffold (this skill)010dNo flagsIntermediate
ui-ux-pro-max1,9094moReviewIntermediate
svg-precision5273moReviewIntermediate
mobile-android-design1012moNo flagsIntermediate

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.

1,9092,023

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.

5271,229

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.

101335

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.

95195

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.

101142

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".

27145

Search skills

Search the agent skills registry