skills.rest
silentbalanceyh
silentbalanceyhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

r2mo-ui-login

Generate R2MO-specified login, SSO, and recovery flows for Vue/React projects.

2|1|Updated Nov 20, 2025
Search Tags:#typescript#spec-driven#authentication#frontend#react#vue#login
One-click install
npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2mo-ui-login
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: r2mo-ui-login
Source: https://github.com/silentbalanceyh/r2mo-lain/tree/main/docs/skills/r2mo-ui-login
Command: npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2mo-ui-login

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Front-end teams need a robust, spec-driven entry and authentication flow that seamlessly boots users into the admin shell, with secure token handling and consistent UX across frameworks.

Core Features & Use Cases

  • UI/UX for login, SSO, and recovery flows driven by R2MO specs.
  • Generates entry views, auth stores, and API bindings (Vue/React + TypeScript) and handoffs to the admin shell.
  • Use Case: A new admin project requires a compliant login experience that hydrates state and securely redirects to the shell after authentication.

Quick Start

Create a secure login entry page based on R2MO specs and integrate it with the admin shell.

Frequently Asked Questions about r2mo-ui-login

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

FAQPage Schema
How do I generate a spec-driven login flow in React or Vue with TypeScript?▼

A spec-driven login flow in React or Vue with TypeScript is generated by applying R2MO specifications to produce entry views, auth stores, and API bindings. The Skill automates this by hydrating state and securely redirecting users to the admin shell after authentication.

What is the best way to implement SSO and password recovery UX for an admin shell?▼

The best way to implement SSO and recovery UX for an admin shell is using R2MO specifications to drive the generation of entry views and auth stores. This approach handles secure token handoffs and ensures consistent authentication experiences across Vue or React projects.

Can I use R2MO specs to build authentication flows for both Vue and React projects?▼

Yes, R2MO specs support building authentication flows for both Vue and React projects. The Skill generates framework-specific entry views, auth stores, and API bindings using TypeScript, ensuring compliant login, SSO, and recovery experiences across different frontend implementations.

How do I handle secure token management and state hydration after user authentication?▼

Secure token management and state hydration after user authentication are handled by generating auth stores and API bindings from R2MO specs. The Skill satisfies front-matter driven layouts and store/auth_model/guards, securely booting users into the admin shell.

Does spec-driven authentication support mock testing for login and recovery flows?▼

Yes, spec-driven authentication supports mock testing for login and recovery flows. The Skill includes optional mock support, allowing developers to test entry views, auth stores, and API bindings without relying on live backend services during frontend development.

Why use specification-driven entry views instead of manually coding frontend authentication?▼

Specification-driven entry views eliminate manual coding inconsistencies by automatically satisfying front-matter driven layout, bind/actions/api_refs, and validation/logic rules. This ensures robust token handling, standardized UX, and secure admin shell handoffs across Vue and React projects.

Related Skills

Explore More Software Engineering Skills→
rafasoaresrafasoares

regle-typescript

Generate type-safe TypeScript typings for Regle form validation schemas.

Community
Advanced
cill-i-amcill-i-am

router-core/auth-and-guards

Implement route protection and redirect guards in TanStack Router apps.

Community
Advanced
suzuki3jpsuzuki3jp
15

create-auth-skill

Plan and scaffold Better Auth integration for TypeScript/JavaScript apps.

Community
Advanced
sudarshan-krishnansudarshan-krishnan

clerk-expo

Implement Clerk authentication for Expo and React Native apps.

Community
Advanced