📦
code-instructor
80Обучение коду через создание приложений
Изучение кода может казаться абстрактным, когда примеры оторваны от реальных проектов. Этот навык обучает концепциям, одновременно пошагово создавая работающие приложения.
コーディング＆開発 表示
スキル designing-components
📦
designing-components
コンテンツリビジョン r1 安全 ⚙️ 外部コマンド
Проектирование компонентов Tailwind
Командам нужен единообразный стиль компонентов без изменения общих UI-примитивов. Этот навык помогает Claude, Codex и Claude Code создавать CSS для компонентов в соответствии с соглашениями Tailwind и с четкими границами файлов.
対応: Claude Codex Code(CC)
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
エージェントリクエスト
Review the Skillstore skill "designing-components" from https://skillstore.io/skills/emz1998-designing-components.md and its manifest at https://skillstore.io/api/skills/emz1998-designing-components/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「designing-components」を使用しています。 Design a profile card component for a dashboard.
期待される結果:
Агент создает новый компонент, добавляет рядом CSS-файл и стилизует карточку с учетом рекомендаций Tailwind component layer.
「designing-components」を使用しています。 Update a settings panel without changing shared UI primitives.
期待される結果:
Агент оставляет защищенные UI-файлы без изменений и добавляет стилизацию уровня функции в области компонента.
「designing-components」を使用しています。 Add a custom visual state for a component.
期待される結果:
Агент проверяет контекст Tailwind проекта и использует рекомендации по пользовательским утилитам или вариантам только тогда, когда это соответствует локальным соглашениям.
セキュリティ監査
安全v4 • 2026/7/6 バージョン別レポートを開く
All ten static findings are false positives caused by Markdown inline code backticks in SKILL.md. The file contains component design guidance and local documentation path references, with no evidence of shell execution, prompt injection, network access, secret access, or data exfiltration. No semantic security findings were found.
1
スキャンされたファイル
26
解析済み行数
0
レビュー項目
0
誤検知を無視
リスク要因
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex 監査履歴を表示 →
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/emz1998-designing-components/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/emz1998-designing-components?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/emz1998-designing-components?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/emz1998-designing-components/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/emz1998-designing-components.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学術引用 (APA · BibTeX · CFF)
APA形式の引用
Emz1998. (2026). designing-components security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/emz1998-designing-components/audits/4BibTeX形式の引用
@techreport{emz1998-emz1998-designing-components-2026,
author = {Emz1998},
title = {designing-components security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/emz1998-designing-components/audits/4},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "designing-components security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "Emz1998"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/emz1998-designing-components/audits/4"
identifiers:
- type: other
value: "skillstore:emz1998-designing-components:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore スコア
このスコアの理由 証拠の信頼度: 高 55
アーキテクチャ
85
保守性
87
コンテンツ
69
コミュニティ
83
仕様準拠
作成できるもの
Создание функциональных компонентов
Создайте новый функциональный компонент с отдельным CSS-файлом и стилизацией через component layer Tailwind.
Защита общих UI-файлов
Добавляйте проектно-специфичные компоненты, сохраняя общие UI-примитивы без изменений.
Применение рекомендаций Tailwind v4
Используйте контекст Tailwind проекта перед стилизацией нового элемента интерфейса.
これらのプロンプトを試す
Создать базовый компонент
Use the designing-components skill to create a new Tailwind component for [feature]. Follow the project component directory rules.
Стилизовать существующий компонент
Use the designing-components skill to add a separate CSS file for [component]. Use Tailwind component layer conventions.
Использовать контекст Tailwind
Use the designing-components skill to review the Tailwind v4 context docs before styling [component]. Explain any assumptions before editing.
Безопасно переработать стилизацию
Use the designing-components skill to redesign [component] while preserving shared UI files. Add utilities or variants only when they fit existing conventions.
ベストプラクティス
- Подтвердите, что проект использует Tailwind 4.1, прежде чем следовать контексту, специфичному для Tailwind.
- Держите стили компонента рядом с компонентом и избегайте изменения общих UI-примитивов.
- Проверяйте сгенерированные компоненты на адаптивное поведение и состояния доступности.
回避
- Применение навыка к проектам без Tailwind без адаптации рекомендаций по стилизации.
- Редактирование защищенных общих UI-файлов, когда достаточно компонента уровня функции.
- Добавление пользовательских утилит или вариантов без проверки существующих соглашений проекта.
よくある質問
Что этот навык помогает мне создавать?
Он помогает AI-агентам проектировать frontend-компоненты с CSS-организацией, ориентированной на Tailwind, и четкими границами файлов.
Он генерирует компоненты самостоятельно?
Нет. Он предоставляет инструкции, которым Claude, Codex или Claude Code могут следовать во время реализации.
Какие инструменты могут его использовать?
В отчете указана поддержка Claude, Codex и Claude Code.
Требуется ли для него Tailwind CSS?
Да. Рекомендации построены вокруг директив Tailwind, component layers, утилит и вариантов.
Включена ли указанная документация Tailwind?
Просканированный пакет навыка включает только SKILL.md, поэтому целевые проекты должны предоставлять эти контекстные файлы.
Может ли он изменять общие UI-компоненты?
Навык предписывает агентам не трогать общий UI-каталог, указанный в SKILL.md.
開発者情報
作成者
Emz1998ライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
a06681402992ceae98ba04d54cfd4ab004862696
メンテナンスの新しさ
2026/7/22
利用状況
5 ダウンロード · 117 閲覧
ファイル構成
📄 SKILL.md
Emz1998 のその他のスキル
すべて表示📦
brainstorming-features
79Генерация идей для функций приложения со структурированным подходом
Командам нужны практичные идеи функций, которые связывают пользовательскую ценность, реализуемость и метрики. Этот навык помогает проводить структурированный мозговой штурм для планирования веб- и мобильных приложений.
生産性 表示
📦
writing-page-layout
79Создавайте компактные макеты страниц Next.js
Файлы страниц Next.js могут становиться сложными в поддержке, когда макет, типы и логика страницы разрастаются вместе. Этот навык помогает Claude, Codex и Claude Code создавать модульные макеты page.tsx с вынесенными типами.
コーディング＆開発 表示
📦
tasks-generator
78Генерация дорожных карт задач проекта
Проектным командам часто трудно преобразовать спецификации в понятную работу по реализации. Этот навык преобразует спецификации в поэтапные задачи с зависимостями и шагами проверки.
生産性 表示
📦
writing-types
78Пишите модульные типы Next.js
В проектах Next.js могут накапливаться большие файлы типов, которые сложно поддерживать. Этот навык помогает Claude, Codex и Claude Code писать небольшие TypeScript-типы и интерфейсы в srs/types.
コーディング＆開発 表示
📦
implementation-review
78Ревью реализаций перед коммитом
Команды могут пропустить недостатки плана или проблемы в коде, когда этапы рабочего процесса проходят быстро. Этот навык направляет завершенные планы и реализации агентам ревью перед следующим этапом.
コーディング＆開発 表示
関連スキル
すべて表示📦
ui-styling
83Build Accessible Tailwind Interfaces
作成者 nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
デザイン＆クリエイティブ 表示
📦
ui-design
80Проектируйте выразительные UI-прототипы
作成者 tencentcloudbase
Типовым AI-интерфейсам часто не хватает визуального направления и деталей с учетом платформы. Этот навык помогает Claude, Codex и Claude Code определить дизайн-замысел перед созданием прототипов.
デザイン＆クリエイティブ 表示
📦
frontend-design
81Проектирование выразительных фронтенд-интерфейсов
作成者 Atman36
Типовые сгенерированные интерфейсы часто выглядят предсказуемо и слабо. Этот навык направляет Claude, Codex и Claude Code к выразительному, готовому к продакшену фронтенд-дизайну.
デザイン＆クリエイティブ 表示
📦
shape
81Планируйте UX до разработки
作成者 pbakaus
Команды часто создают интерфейсы до того, как уточнят цели пользователей, состояния и ограничения. Этот навык помогает провести исследование и подготовить дизайн-бриф для реализации.
デザイン＆クリエイティブ 表示
📦
design-lint
80Check designs with deterministic CSS rules
作成者 cubha
Design reviews can vary between reviewers and slow down delivery. This skill applies repeatable checks to HTML and CSS so teams can catch token, layout, and accessibility issues before release.
デザイン＆クリエイティブ 表示
📦
ui-ux-designer
79Проектируйте доступные интерфейсы продуктов
作成者 sickn33
Командам часто сложно преобразовать потребности пользователей в согласованные и доступные интерфейсы. Этот навык помогает с исследованиями, сценариями, дизайн-системами, токенами и передачей в разработку.
デザイン＆クリエイティブ 表示