Install
openclaw skills install @lssmanager/lssApplies the Learn Social Studies brand system to React interfaces using CSS variables, reusable component conventions, light theme by default, and dark theme as optional override. Use for apps, dashboards, admin panels, forms, landing pages, and reusable UI systems.
openclaw skills install @lssmanager/lssThis skill standardizes Learn Social Studies visual design across React interfaces. It is intended for:
Apply this skill when a React project needs consistent Learn Social Studies branding, reusable styling primitives, theme support, and developer-friendly UI conventions.
The resulting interface must feel:
lightdarkdata-theme attribute on <html>localStoragePoppinsMontserratJetBrains Mono or Fira Code#000000#F3B723 as a page, card, panel, or alert background surfaceWhen applying this skill:
src/
styles/
tokens.css
base.css
components.css
theme/
ThemeProvider.tsx
useTheme.ts
components/
Button/
Input/
Card/
Badge/
Add to the root HTML document:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
Use the template files included with this skill as the source of truth:
templates/react/src/styles/tokens.csstemplates/react/src/styles/base.csstemplates/react/src/styles/components.csstemplates/react/src/theme/ThemeProvider.tsxtemplates/react/src/theme/useTheme.tstemplates/react/src/components/*If the target project already has its own component library:
primary, secondary, accentsuccess, warning, error, infoAfter applying this skill, the project should have: