skills.rest
nutrisari-jeruk
nutrisari-jerukOFFICIAL
Explore all skills by this author →
GitHub

new-block

Create React page blocks with router configuration and CLI registry integration.

Updated Jan 8, 2026
Search Tags:#web development#React#page block#router wiring#CLI registry
One-click install
npx skills add https://github.com/nutrisari-jeruk/react-vite-template --skill new-block
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: new-block
Source: https://github.com/nutrisari-jeruk/react-vite-template/tree/main/.claude/skills/new-block
Command: npx skills add https://github.com/nutrisari-jeruk/react-vite-template --skill new-block

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, react-router-dom, frontier-fe, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the need for quickly creating complete page blocks (e.g., Login, Register, Dashboard) with integrated router wiring, metadata, and CLI registry registration.

Core Features & Use Cases

  • Page Block Creation: Scaffold full page blocks with router configuration, metadata, and navbar integration.
  • CLI Registry Integration: Register the block in the CLI registry for easy installation via frontier-fe add block:<name>.
  • Use Case: When you need to add a new page block to your application, such as a login page or dashboard, this Skill automates the process of setting up the route, component, and metadata.

Quick Start

Use the new-block skill to create a login page at the '/login' path.

Frequently Asked Questions about new-block

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

FAQPage Schema
How do I scaffold a new React page block with router wiring automatically?▼

Scaffolding a new React page block with router wiring is automated by generating the component, metadata, and router configuration simultaneously. This process also integrates navbar links and registers the block for CLI installation.

What dependencies do I need to create page blocks with CLI registry integration?▼

Creating page blocks with CLI registry integration requires React, react-router-dom for routing, and the frontier-fe CLI tool for block management and registration.

How does CLI registry integration work for React page blocks?▼

CLI registry integration works by registering the newly created page block in the CLI registry, enabling developers to install it into web applications via the frontier-fe add block command.

When should I automate page block creation instead of manually adding React routes?▼

Automating page block creation is ideal when adding complete pages like Login or Dashboard to web applications, eliminating the manual overhead of configuring React Router, writing metadata, and setting up navbar integration.

Can I use this page block scaffolding tool without react-router-dom installed?▼

No, react-router-dom is a required dependency. The scaffolding tool relies on react-router-dom to automatically wire the newly created page block into your application's routing configuration.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
wesleysimpliciowesleysimplicio
1

hyperframes-registry

Install and wire registry blocks and components into HyperFrames compositions.

Community
Intermediate
bsamieebsamiee
2

mermaid-diagramming

Generate Mermaid diagrams with ELK layout and YAML frontmatter.

Community
Advanced
pluginagentmarketplacepluginagentmarketplace
1

react-router

Configure React Router v6 client-side routing with nested and protected routes.

Community
Intermediate