skills.rest
looselyorganized
looselyorganizedOFFICIAL
Explore all skills by this author →
WebsiteGitHub

stocktaper-design-system

Implements reusable UI components and stylesheets for the branded design system.

Updated Feb 26, 2026
Search Tags:#typescript#frontend#react#design system#tailwind css#ui components#dark mode
One-click install
npx skills add https://github.com/looselyorganized/lo-plugin --skill stocktaper-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stocktaper-design-system
Source: https://github.com/looselyorganized/lo-plugin/tree/main/plugins/lo-design/skills/stocktaper-design-system
Command: npx skills add https://github.com/looselyorganized/lo-plugin --skill stocktaper-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive, opinionated design system to ensure UI consistency, enforce a specific aesthetic, and streamline the development of user interfaces across Loosely Organized projects.

Core Features & Use Cases

  • Monochromatic, Monospace Aesthetic: Enforces a clean, vintage research document look with IBM Plex Mono and a limited color palette.
  • Dark Mode Native: Seamlessly handles dark mode via CSS variable swapping, requiring no extra effort from component authors.
  • Component Library: Offers pre-built, reusable UI components (Buttons, Cards, Layouts, etc.) adhering to the design system.
  • Use Case: When asked to "design a new feature card" or "update the website's color scheme," this Skill provides the foundational styles, components, and guidelines to ensure the changes integrate perfectly with the existing StockTaper design language.

Quick Start

Use the stocktaper-design-system skill to build a new card component with a dashed border and the default cream background.

Frequently Asked Questions about stocktaper-design-system

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

FAQPage Schema
How do I build a React UI with a monochromatic, monospace design system?▼

To build a monochromatic, monospace design system in React, use a library that enforces IBM Plex Mono typography, strict color tokens, and dashed borders. This Skill provides those pre-built components and styling guidelines to ensure UI consistency.

Does this design system skill support dark mode natively with Tailwind CSS?▼

Dark mode is supported natively in this design system via CSS variable swapping and next-themes integration. It requires no extra effort from component authors to switch between light and dark themes when using Tailwind CSS.

Can I use these UI components to update my website's color scheme and enforce typography rules?▼

Yes, you can use these UI components to update your website's color scheme and enforce strict typography rules. The system provides foundational styles and tokens that ensure changes integrate perfectly with a monospaced aesthetic.

What is the best way to design a feature card with a dashed border and cream background in React?▼

The best way to design a feature card with a dashed border and cream background is to apply the StockTaper design system's reusable component library. It enforces these specific styling rules natively within your React project.

Do I need to manually configure CSS variables for dark mode implementation in this React design system?▼

You do not need to manually configure CSS variables for dark mode implementation. The system seamlessly handles dark mode via CSS variable swapping and next-themes, streamlining the process for TypeScript and React developers.

Related Skills

Explore More Design & Creative Skills→
netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced
redenv-labsredenv-labs
4

frontend-design

Generate custom frontend interfaces for web components, pages, and applications.

Official
Advanced
try-workstry-works
95

swiss-design

Apply Swiss International Style design principles using Tailwind CSS and IBM Plex Sans.

Community
Intermediate
seanmcquaidseanmcquaid
8

migrate-radix-to-base

Migrate React components from Radix UI to Base UI.

Community
Advanced