Like and Dislike Buttons with Local Prompting

[m-thompson-code]

The result of this PR is https://github.com/bitovi/carton-case-management/tree/fe-735-like-dislike-buttons-local-prompting-attempt. The results are fairly close to what I'd hope for. Here are some call outs:

1. The upvote/downvote section jumps a little if there's no votes for both and then there is votes. You can recreate this by seeing an upvote/downvote section with no votes and displays no numbers (as expected) and then clicking on either the upvote or downvote icon. This will increment the vote to 1 and the section will shift slightly. This is because this section will normally have a total height of 29px, but when there is no text, it has a height of 26px. This isn't a mistake as this actual follows the figma document 100%. The design suggests this is correct behavior.
2. The hover state to display the list of users that have upvote/downvote is a little weird. You have to move your cursor away completely and then hover again to see the list sometimes. I couldn't recreate consistently. Bug seems to not happen if the comment already has upvotes and downvotes from other users than the current user. This means that there are always a renderable list of users no matter if the current user chooses to upvote/downvote or remove their vote. Might have something to do with the bug.

Agents

Suggests TTD to implement feature.

Assumptions:

1. Project uses tailwind
2. Project uses tRPC and has a test file router.test.ts
3. Project uses some form of seeding

Skills

component-set-test-driven-development

.github/skills/component-set-test-driven-development

• TDD to implement feature that focuses on creating placeholder unit tests for involved figma component sets -> replace with actual test and implementation
• Includes skill scripts which is official to specification. This didn't "work" out of the box, I had to add instructions in the skill to use it. Maybe I set it up wrong? I couldn't find an example that was doing anything too special, so I don't know.

figma-url-router

.github/skills/figma-url-router

• Primarily on parsing figma information based on what kind of information the url is trying to focus on. Component Set vs not.
• Has overlap with component-set-test-driven-development.
• Likely should just be removed.

mcp-error-handling

.github/skills/mcp-error-handling

• was meant to prevent mistakenly trying to move forward without mcp being available. I don't think this actual works though, the AI still tries to push through.
• I think once it asked me to continue when something went wrong. Seems like if at least one of the urls is correct, it'll try to just push forward.

Specs

005-comment-upvotes

specs/005-comment-upvotes/spec.md

• Summary of requirements for feature and links to figma.
• Does not contain any technical details or instructions.

TODOs

1. Remove figma-url-router or simplify it drastically (likely remove). The logic should live 100% in component-set-test-driven-development. There is already a lot of overlap between the two skills and I'm not 100% sure that figma-url-router gets used as expected anymore.
2. Make it so that when analyzing a figma link that doesn't point to a figma node accessible to mcp_figma_get_design_context, that it should then get the nearest available nodes and assume they're "feature examples".
3. Ensure that when analyzing figma links, that it does the full process on every link and every associated node before continuing.
4. Rework mcp-error-handling skill to require user prompt to continue if an issue happens at all. Currently it seems to only work if there's never a time when mcp request was successful, i.e. mcp tool was successful, but next one wasn't doesn't halt process.
5. Consider updating ideas to also focus storybook generation.
6. Skills are too long compared to examples by anthropics, continue to reduce file sizes. The large file sizes are likely a sign that there's too much focus on things or too much overlap everywhere. Not sure.
7. Consider more validation scripts.