What is an application shell in this context?

An application shell is the persistent navigation and layout structure, such as sidebars or headers, that wraps your application's content to provide a consistent user experience.

What UI framework does it use for components?

It generates components using React, Tailwind CSS for styling, and Lucide-React for iconography, ensuring modern and portable code.

How does it decide which navigation pattern to use?

The skill analyzes your product overview and roadmap to suggest the simplest pattern that fits your project's complexity, adhering to the KISS (Keep It Simple, Stupid) principle.

Does this skill work with Python quant tools?

Yes, it is specifically designed to recognize frameworks like Streamlit and Dash, advising you to skip custom shell design in favor of their built-in navigation patterns.

App Shell Architect

Name: App Shell Architect
Author: CinderZhang

byCinderZhang

•

디자인 도구

Designs and implements responsive navigation structures and layout shells for React applications and quantitative tools.

The App Shell Architect skill follows the DRIVER methodology to help developers establish a consistent, production-ready navigation shell for their applications. It analyzes your product roadmap to recommend the optimal layout pattern—whether it's a sidebar for complex dashboards or a top nav for simple tools—and generates the necessary React components using Tailwind CSS and Lucide icons. Crucially, it recognizes when you are using Python-based frameworks like Streamlit or Dash and intelligently skips unnecessary custom design steps to favor native framework patterns.

주요 기능

01Automated navigation layout selection including Sidebar, Top Nav, and Minimal Header patterns.

022 GitHub stars

03Intelligent platform detection that auto-skips custom shell design for Streamlit and Dash applications.

04Generation of production-ready React components (AppShell, MainNav, UserMenu) using Tailwind CSS.

05Comprehensive specification generation documenting navigation structures and responsive behaviors.

06Built-in support for dark mode variants and mobile-responsive design principles.

사용 사례

01Bootstrapping a new React dashboard with a collapsible sidebar and integrated user menu.

02Defining the navigation structure for AI-augmented finance tools based on a product roadmap.

03Quickly prototyping a responsive application header and navigation flow for a web utility.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cinderzhang/driver-plugin represent-shell

For use in Claude.ai and ChatGPT

Download Skill