skills.rest
Jaylaelike
JaylaelikeCOMMUNITY
Explore all skills by this author →
GitHub

foundry-nextgen-frontend

Build Foundry-themed frontend interfaces using Vite, React, and pnpm.

Updated Sep 6, 2024
Search Tags:#React#frontend#UI#patterns#animations#design-system#Foundry NextGen
One-click install
npx skills add https://github.com/Jaylaelike/pm25-interactive-thaipbs-app --skill foundry-nextgen-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: foundry-nextgen-frontend
Source: https://github.com/Jaylaelike/pm25-interactive-thaipbs-app/tree/main/.claude/skills/foundry-nextgen-frontend
Command: npx skills add https://github.com/Jaylaelike/pm25-interactive-thaipbs-app --skill foundry-nextgen-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams implement polished frontend UIs by applying a consistent Foundry NextGen design system, eliminating repetitive setup and guesswork.

Core Features & Use Cases

  • Predefined design tokens, patterns, and components that enforce neutral dark aesthetics, motion, and spacing.
  • Reusable patterns for dashboards, agent builders, data grids, and entity-management interfaces, plus app shell and modular layouts.
  • Use Case: rapidly scaffold a new Foundry-themed frontend, then extend with components and tokens while maintaining visual consistency and accessibility.

Quick Start

pnpm create vite@latest my-foundry-app --template react-ts cd my-foundry-app pnpm add lucide-react recharts

Frequently Asked Questions about foundry-nextgen-frontend

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

FAQPage Schema
How do I build a Foundry-themed frontend with React and Vite?▼

You can build a Foundry-themed frontend by using predefined design tokens, patterns, and components within a Vite + React stack. This enforces neutral dark aesthetics, motion, and spacing without starting from scratch.

What are the design system prerequisites for a neutral dark dashboard UI?▼

A neutral dark dashboard UI requires a Vite + React stack with pnpm, Framer Motion for animations, and the lucide-react and recharts libraries. The provided references for design-tokens, components, and patterns enforce the styling and interaction rules.

Can I use this design system to scaffold agent builders and data grids?▼

Yes, you can use this design system to scaffold agent builders and data grids. It provides reusable patterns for dashboards, entity-management interfaces, app shells, and modular layouts suitable for production applications requiring consistent visual styling.

Does this React UI skill require Framer Motion for animations?▼

Yes, this React UI skill requires Framer Motion to handle animations. It leverages predefined design tokens and patterns to maintain consistent motion and spacing across the Foundry NextGen interface components and layouts.

What is the best way to maintain visual consistency across Foundry frontend components?▼

The best way to maintain visual consistency is to apply the provided design-tokens.md, components.md, and patterns.md references. This eliminates repetitive setup and guesswork by enforcing predefined styling, accessibility, and interaction patterns across your application.

Related Skills

Explore More Design & Creative Skills→
genomicxgenomicx
1

genomicx-app-creator

Scaffold GenomicX browser-based bioinformatics apps with Vite+React or Next.js 15.

Official
Intermediate
tadams95tadams95
1

framer-motion

Implement React UI animations with Framer Motion motion components and variants.

Community
Intermediate
ricardocidalericardocidale

3d-graphics

Integrate Three.js 3D scenes and framer-motion animations into web applications.

Community
Intermediate
sablier-labssablier-labs
7

sablier-design

Generate React components and pages matching Sablier's dark-theme aesthetic.

Official
Advanced