What problem does it solve?
Adding a new page or UI component to the Authgear portal requires following many project-specific conventions—file structure, form state patterns, GraphQL code generation, CSS modules, and route registration—that are easy to get wrong without deep familiarity with the codebase.
Core Features & Use Cases
- Screen scaffolding guidance: Defines where screens and components live, naming conventions (kebab-case directories, PascalCase files), and the standard outer/inner component anatomy with form state helpers.
- GraphQL integration: Explains the two separate GraphQL APIs (Admin API and Portal API), how to write
.graphql query files, and how to run npm run gentype to generate typed Apollo hooks.
- Styling and quality checks: Enforces Tailwind-based CSS module conventions and requires running
npm run typecheck and npm run eslint before finishing.
- Use Case: When asked to add a new fraud-protection settings tab to the portal, the Skill walks through reading an existing reference screen, creating the screen files, registering the lazy route in AppRoot, writing the GraphQL query, and passing all lint and type checks.
Quick Start
Add a new portal screen for managing webhook settings with a configuration form and register it in the app routes.
