Open
Conversation
Signed-off-by: amaan-bhati <amaanbhati49@gmail.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new .claude “design-agent” skill intended to guide design/UI-focused PR reviews in this docs repo by documenting the current design tokens, reusable component inventory, and common frontend anti-patterns.
Changes:
- Introduces
design-agentskill definition and review checklist (.claude/skills/design-agent/SKILL.md). - Adds design token reference documentation for theme variables, Tailwind extensions, and inferred usage (
references/design-tokens.md). - Adds component inventory and anti-pattern guidance for consistent UI contributions (
references/component-library.md,references/anti-patterns.md).
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| .claude/skills/design-agent/SKILL.md | Defines when/how to invoke the design review skill and what to check. |
| .claude/skills/design-agent/references/design-tokens.md | Documents the repo’s theme variables, Tailwind tokens, typography, spacing, and related conventions. |
| .claude/skills/design-agent/references/component-library.md | Catalogs reusable src/components/* and src/theme/* building blocks and when to use them. |
| .claude/skills/design-agent/references/anti-patterns.md | Lists existing styling/UX pitfalls to flag during reviews and suggests alternatives. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -0,0 +1,239 @@ | |||
| # Keploy Docs design tokens | |||
|
|
|||
| This repo does not have a single token source of truth. Core theme tokens live in [`src/css/custom.css`](/Users/amaan-bhati/Documents/docs/src/css/custom.css), custom Tailwind extensions live in [`tailwind.config.js`](/Users/amaan-bhati/Documents/docs/tailwind.config.js), and newer components also use Tailwind's default palette directly. Sections marked `[inferred]` come from repeated class usage rather than explicit config. | |||
Comment on lines
+30
to
+31
| | `--ifm-background-color` | `rgb(249, 250, 251)` | `#141414` | `src/css/custom.css` | | ||
| | `--ifm-footer-background-color` | `#ffffff` | `#000000` | `src/css/custom.css` | |
Comment on lines
+14
to
+16
| - File: [`src/components/shared/Button.js`](/Users/amaan-bhati/Documents/docs/src/components/shared/Button.js) | ||
| - Purpose: Simple shared `<button>` with Docusaurus variable-based colors and a focus ring. | ||
| - Use when: You need a real `<button>` element inside a custom React component. |
Comment on lines
+61
to
+64
| Or, for doc-wide theming: | ||
|
|
||
| ```jsx | ||
| <span style={{ color: "var(--ifm-color-primary)" }} /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What has changed?
will update the pr descriptio once completed
Please include a summary of the change.
This PR Resolves #(issue)
Type of change
Please delete options that are not relevant.
How Has This Been Tested?
Please run npm run build and npm run serve to check if the changes are working as expected. Please include screenshots of the output of both the commands. Add screenshots/gif of the changes if possible.
Checklist: