skills.rest
joelklabo
joelklaboCOMMUNITY
Explore all skills by this author →
Website𝕏@joelklaboGitHub

nostrstack-embed-ui

Apply design tokens and CSS classes to @nostrstack/embed components.

Updated Dec 31, 2025
Search Tags:#ui#frontend#css#components#tokens#design-system#nostrstack
One-click install
npx skills add https://github.com/joelklabo/markdowntown-cli --skill nostrstack-embed-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nostrstack-embed-ui
Source: https://github.com/joelklabo/markdowntown-cli/tree/main/codex/skills/nostrstack-embed-ui
Command: npx skills add https://github.com/joelklabo/markdowntown-cli --skill nostrstack-embed-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about nostrstack-embed-ui

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

FAQPage Schema
How do I apply CSS custom properties to standardize embed UI components?▼

Apply design tokens defined under the .nostrstack-theme class to standardize embed UI components. This ensures consistent styling and prevents visual regressions across widgets during development and updates.

What is the recommended way to audit a widget for design system compliance?▼

To audit a widget for design system compliance, apply the required design tokens, update component primitive classes like .nostrstack-btn, and validate the rendered output using Chrome DevTools MCP.

Can I use the gallery app as a canary for embed UI regressions?▼

Yes, you can use the gallery app as a canary for embed UI regressions. The system guidance directs developers to monitor the gallery to catch visual changes and verify widget behavior before production deployment.

How do I create consistent UI components for a blog kit without causing style drift?▼

Create consistent UI components for a blog kit by using recommended primitives like .nostrstack-card and badge patterns. Adhering to these standardized classes prevents style drift and maintains visual consistency across the application.

Does this design system guidance enforce motion duration constraints for UI animations?▼

Yes, the design system guidance enforces motion duration constraints for UI animations. It requires developers to adhere to specific timing variables under the .nostrstack-theme to maintain consistent motion behavior across embeds.

Why does my embed component styling break when I update CSS tokens?▼

Your embed component styling breaks when updating CSS tokens if the changes are not validated against the repository UI specs. Verifying modifications with Chrome DevTools MCP and the established QA workflow prevents these regressions.

Related Skills

Explore More Design & Creative Skills→
joelklabojoelklabo

nostrstack-dev-workflow

Run deterministic local development and debugging workflows for the nostrstack repository.

Community
Intermediate
easingthemeseasingthemes
6

aem-fe-verify

Screenshot AEM components in wcmmode=disabled and compare against Figma references.

Community
Advanced
arbazkhan971arbazkhan971
26

designsystem

Standardize design tokens and component APIs across products.

Community
Advanced
kyamsSRLkyamsSRL

design-system-patterns

Build scalable design systems with Style Dictionary token pipelines and React theme providers.

Community
Advanced