Skills
.Work. You
Rest

nostrstack-embed-ui

Community

Consistent embed UI & design system guidance

Design & Creative#ui#frontend#css#components#tokens#design-system#nostrstack
Authorjoelklabo
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Provides clear, centralized UI and design-system guidance to avoid inconsistent styles, incorrect token usage, and UI regressions across @nostrstack/embed, @nostrstack/blog-kit, and apps/gallery.

Core Features & Use Cases

  • Design tokens & variables: Describes CSS custom properties under .nostrstack-theme and how to apply themes via helper APIs.
  • Component primitives & classes: Lists recommended primitives like .nostrstack-btn, .nostrstack-card, inputs, and badge/callout patterns to ensure consistent components.
  • Verification & QA: Directs developers to consult UI specs and validate changes with Chrome DevTools MCP or the repo's QA workflow; use the gallery as a canary for embed regressions.

Quick Start

Use this skill to audit an embed component by applying the design-system tokens, updating the component classes, and validating the result in Chrome DevTools MCP.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: nostrstack-embed-ui
Download link: https://github.com/joelklabo/markdowntown-cli/archive/main.zip#nostrstack-embed-ui

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.