github-stars-frontend

Apply project-specific frontend conventions to GitHub Stars Manager UI work.

193|15|Updated Jun 22, 2026
One-click install
npx skills add https://github.com/izumi0uu/better-github-stars-manager --skill github-stars-frontend
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: github-stars-frontend
Source: https://github.com/izumi0uu/better-github-stars-manager/tree/main/.codex/skills/github-stars-frontend
Command: npx skills add https://github.com/izumi0uu/better-github-stars-manager --skill github-stars-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill gives project-specific frontend rules for the GitHub Stars Manager extension so UI changes stay consistent, shadow-root safe, and aligned with the repo’s existing architecture.

Core Features & Use Cases

  • UI implementation guidance: Helps when building or refactoring components in the stars page, popup, options page, and shared UI layer.
  • Styling and theming rules: Covers Tailwind v3 usage, theme tokens, motion utilities, semantic colors, and GitHub-native light/dark behavior.
  • Shadow DOM safety: Ensures content-script styling, portals, and popovers work correctly inside the extension’s shadow root.
  • Verification expectations: Recommends the right checks for type safety, tests, and build validation after frontend changes.

Quick Start

Use the github-stars-frontend skill to review this UI change against the repository’s frontend conventions and tell me what to update.

Frequently Asked Questions about github-stars-frontend

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

FAQPage Schema
How do I style a React component inside a Chrome extension shadow DOM without CSS leaking?

Styling a React component inside a Chrome extension shadow DOM requires project-specific conventions that ensure shadow-root safe styling, correct portal rendering, and isolated popover behavior within the extension frontend.

What is the best way to apply Tailwind theme tokens and semantic colors in a Chrome extension UI?

Applying Tailwind theme tokens in a Chrome extension UI involves using semantic colors and GitHub-native light/dark behavior rules to maintain consistency across the stars page, popup, and options page entrypoints.

How do I handle reduced-motion behavior when adding animations to extension frontend components?

Handling reduced-motion behavior in extension frontend components requires applying prescribed motion utilities and Tailwind v3 rules that respect repository architecture boundaries during UI implementation and refactoring tasks.

Can I use this skill for refactoring shared UI layer components across multiple extension entrypoints?

Refactoring shared UI layer components across multiple extension entrypoints is supported, covering implementation, debugging, and review tasks for React components, layout editing, and theme tokens within the extension frontend architecture.

Why does my Tailwind styling break when rendering popovers through a portal in the extension shadow root?

Tailwind styling breaking during portal rendering in the shadow root happens when content-script styling ignores shadow DOM boundaries, which requires adherence to shadow-root safe rendering conventions and repo architecture rules.